How to append the ajax success data in dropdown menu

Question

I want to make the categories, sub-categories, second level categories dynamically. I made the main categories to be displayed using controller.

And sub-categories, I want to append in the menu bar. I made the sub-categories to display in the console. But to append the data to the div, am facing issues.

This is my code:

<section class="bc-category">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="bc-category-menu">
          <div class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <i class="fa fa-list-ul" aria-hidden="true"></i>All Category <span class="glyphicon glyphicon-triangle-bottom"></span></a>
            <ul class="dropdown-menu multi-level">
            @foreach($main_categories as $main_category)
              <li id="{{$main_category}}" class="dropdown-submenu main_category"> <a class="maincategory" tabindex="-1" href="#">{{$main_category}}</a>
                <ul class="dropdown-menu">
                  <li class="dropdown-submenu"><a id="subcat" tabindex="-1" href="#"></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">All</a></li>
                        <li><a href="#">Boot Cut</a></li>
                        <li><a href="#">Capri</a></li>
                        <li><a href="#">Straight Leg</a></li>
                        <li><a href="#">Skinny</a></li>
                        <li><a href="#">Ankle/Cropped</a></li>
                        <li><a href="#">Boyfriend</a></li>
                        <li><a href="#">Overalls</a></li>
                        <li><a href="#">Wide Leg/Flare</a></li>
                        <li><a href="#">Relaxed</a></li>
                        <li><a href="#">Mid-rise</a></li>
                        <li><a href="#">Low-rise</a></li>
                        <li><a href="#">Hi-rise</a></li>
                        <li><a href="#">Easy Boot</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              @endforeach
            </ul>
          </div>
          <div class="bc-input-search">
            <input type="text" class="form-control SearchBar" placeholder="Search for Products, Brands">
            <span class="input-group-btn">
            <button class="btn btn-defaul SearchButton" type="button"> <span class=" glyphicon glyphicon-search SearchIcon" ></span> </button>
            </span> </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.main_category').mouseover(function(){
  var name = $(this).attr('id');
  $.ajax({
       type: 'GET',
       url : '/subcategoryfetch',
       data: {"name": name},
       success: function(data) {
          console.log(data);
            $('#subcat').append(data);
        },
    });   
});
</script>

I used this following function: Now it's working. But only for first menu, it's working.

$('.main_category').mouseover(function(){
  var name = $(this).attr('id');
  $.ajax({
       type: 'GET',
       url : '/subcategoryfetch',
       data: {"name": name},
       success: function(data) {
          console.log(data);
            // $('#subcat').append(data);
            $.each(data, function(key, value) {   
            $('#subcat')
                .append($('<a tabindex="-1" href="#"></a>')
                .attr("value",key)
                .text(value)); 
          });
        },
    });   
});

Answer 1

Your id subcat gets repeated in loop. it should be unique. also while append modify your code to

$(this).find('#your unique id').append()

Modify your a tag to

<a id="subcat{{$main_category}}">

and update your jquery code

var name = $(this).attr('id');
$(this).find('#subcat'+name).html('');
var that = this;
$.ajax({
   type: 'GET',
   url : '/subcategoryfetch',
   data: {"name": name},
   success: function(data) {
      console.log(data);
        // $('#subcat').append(data);
        $.each(data, function(key, value) {   
        $(that).find('#subcat'+name)
            .append($('<a tabindex="-1" href="#"></a>')
            .attr("value",key)
            .text(value)); 
      });
    },
});