title: add class active only to the clicked category
body: <p>I have a menu with some post categories:</p>
  
  <pre><code>&lt;ul&gt;
      @foreach($categories-&gt;get() as $category)
          &lt;li class="ative"&gt;
              &lt;a href="#" name="category" id="{{$category-&gt;id}}"&gt;{{$category-&gt;name}}&lt;/a&gt;
          &lt;/li&gt;
      @endforeach
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I click in the category, for example with id "1", through the menu  it appears in the #posts div the posts that belong to the category with id "1".</p>
  
  <p><strong>Issue:</strong></p>
  
  <p>It working fine, the issue is that at first I want to have the first category with the class "active". But when another category is clicked I want to show that clicked category with the class active. But is not working like that, when the page is acessed all categories are active and also when another category is clicked all categories are active. Do you know how to correct the issue?</p>
  
  <p>The #posts div shows the last posts when the page is acessed at first:</p>
  
  <pre><code>    &lt;div id="posts"&gt;
      @foreach($posts as $key =&gt; $post)
      &lt;div id="post" + {{$key}}&gt;
           &lt;img src="{{$post-&gt;image}}"&gt;
          &lt;h1&gt;{{$post-&gt;title}}&lt;/h1&gt;
          &lt;!-- ... --&gt;
      &lt;/div&gt;
      @endforeach
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery code:</strong></p>
  
  <pre><code>$("a[name='category']").on('click', function(){ 
      //tried this by given answer which not worked 
      var category_id = $(this).attr("id"); 
      ('.categories li').removeClass('active'); 
      $(this).addClass('active'); 
      //ended code 
  
      $.ajax({
          url: '{{ route('category.posts',null) }}/' + category_id,
          type: 'GET',
          success:function(result){ 
              $('#posts').empty(); 
              var newPosts = ""; 
              $.each(result, function(index, post) { 
                  newPosts += '&lt;img src="' + post.image + '"&gt;' + + '&lt;h1&gt;' + post.title + '&lt;/h1&gt;';
              }); 
              $('#posts').html(newPosts); 
          }, error: function(error) { 
              console.log(error.status) 
          } 
      }); 
  });
  </code></pre>