I have a menu with some categories:

1.         <ul class="Categories__Menu">
2.             @foreach($categories->take(6) as $category)
3.                 <li class="active">
4.                     <a href="#" name="category" id="{{$category->id}}" href="#">{{$category->name}}</a>
5.                 </li>
6.             @endforeach
7.             <li><a  data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">More</a></li>
8.         </ul>

If the user clicks in More it opens a modal with more categories, the modal have this content:

1.     <div class="modal fade bd-example-modal-lg" id="categoriesModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
2.         <div class="modal-dialog modal-lg">
3.                 <div class="modal-body">
4.                     <div class="container">
5.                         <div class="row">
6.                             <ul class="modal-list row">
7.                                 <li class="col-lg-4 col-md-6 col-sm-12">
8.                                     <a class="">All Categories</a>
9.                                 </li>
10.                                 @foreach($categories as $category)
11.                                     <li class="col-lg-4 col-md-6 col-sm-12">
12.                                         <img src="{{ $category->image }}"/>
13.                                         <a name="category" id="{{$category->id}}">{{$category->name}}</a>
14.                                     </li>
15.                                 @endforeach
16.                             </ul>
17.                         </div>
18.                     </div>
19.                 </div>
20.         </div>
21.     </div>

I have some jquery to do an ajax request to get the conferences that belong to the clicked category. This is working fine.

But I want that the clicked category becomes active in the menu "Categories__Menu". But its not working, the clicked category don't stays active. 

This fiddle " http://jsfiddle.net/e7gjv5ct/6/" demonstrates the issue. The item doesn't stays with the class active when is clicked. And also the item "More" changes the text from "More" to the clicked item text, but the item "More" should only change the text to the clicked category text when a category in the modal is clicked, that is, it should not change when a category in the menu "Categories__Menu" is clicked. 

Do you know where is the issue?

1. 
   
2.     $("a[name='category']").on('click', function(){
3.         $('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');
4.         $('#categoriesModal').modal('hide');
5.         $('#showCategories').addClass('active');
6.     
7.         var category_id = $(this).attr("id");
8.         //alert(category_id);
9.     
10.         $('.Categories__Menu li').removeClass('active');
11.         $(this).parent('li').addClass('active');
12.     
13.         $.ajax({
14.     
15.             url: '{{ route('category.conferences',null) }}/' + category_id,
16.             type: 'GET',
17.             success:function(result){
18.                 $('#conferences').empty();
19.                 var newConferences='';
20.                 var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
21.                 $.each(result, function(index, conference) {
22.                     var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
23.     
24.                     newConferences += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
25.     '                        <div class="card box-shaddow">\n' +
26.     '                            <img class="card-img-top" src='+ conference.image +' alt="Card image cap">\n' +
27.     '                            <div class="card-body">\n' +
28.     '                                <h5 class="card-title">'+conference.name+'</h5>\n' +
29.     '                            </div>\n' +
30.     '                    </div></div>';
31.                 });
32.                 $('#conferences').html(newConferneces);
33.             },
34.             error: function(error) {
35.                 console.log(error.status)
36.             }
37.         });
38.     });