Adding a button for the end of the ul list

In my asp.net MVC application, I’m using signalR for push notifications.

There I load the notifications to the ul list like this.

 <ul class="nav navbar-nav navbar-right">
   <li role="presentation" class="dropdown open">
     <a class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false" onclick="LoadData();">
       <i class="fa fa-envelope-o"></i>
       <span class="badge bg-green" id="notiCount">0</span>
     </a>
     <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu"></ul>
   </li>
 </ul>

So I check the notifications and shows in the dropdown from javascript

function LoadData() {

  $('#menu1').empty();
  $('#menu1').append($('<li> Loading.. </li>'));
  $.ajax({
    type: 'GET',
    url: $("#Get").val(),
    dataType: 'json',
    data: {},
    success: function (data) {
      if (data.Success == true) {

        $('#menu1').empty();
        if (data.listNoti.length == 0) {
          $('')
          $('#menu1').append($('<li>There is nothing to show </li>'));
          console.log("No Data");
        }
        $("#notiCount").empty();
        $("#notiCount").append(data.listNoti.length);
        $.each(data.listNoti, function (index, value) {

          $("#menu1").append('<li> <a> <span class=image><img src ="/Theme/production/images/Annon.png"/> </span> <span>' + value.Ndetails + '</li><hr/>');

        });
      }
    }
  });
}

I want to add a section that end of the <li> as a button to clear all notifications. How to add this?

I tried adding it inside the menu1 but when the javascript load the notifications it got removed.

>Solution :

Seems you just need to invoke append() out of each() to add the button

$.each(data.listNoti, function (index, value) {
  $("#menu1").append('<li> <a> <span class=image><img src ="/Theme/production/images/Annon.png"/> </span> <span>' + value.Ndetails + '</li><hr/>');
});
$("#menu1").append('<li><button onclick="removeEle()">Remove</button></li>')