Notification Count not showing

Question

In my web application, When users log in to the system, I want to show that if there are unread notifications, Show the unread notification count on the bell icon. Here I just check by changing the code, but still, it won't show the count here. I'm still new to this coding and Could you help me to solve this?

This is the HTML code where I want to show the count

<a class="nav-link" data-toggle="dropdown" href="#">
  <span class="far fa-bell">
    <span class="count">&nbsp;</span>
  </span>
  <div class="noti-content">
    <div class="noti-top-arrow"></div>
    <ul id="notiContent"></ul>
  </div>
</a>

This is the Jquery that runs and shows the notifications to the user.

function updateNofification() {
  $('#header ul').empty();
  $('#header ul').append($('<li> Loading.. </li>'));
  $.ajax({
    type: 'GET',
    url: '/Home/GetNotification',
    dataType: 'json',
    cache: false,
    async: false,
    data: {},
    success: function(data) {
      if (data.Success == true) {

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

          $("#header ul").append(value.Message + ' Request No ' + value.ReqId + '. Request From ' + value.ReqFrom + '</br><hr />');
          console.log(value.ReqId);
        });
      }
    }
  });

}

This is the code I got from the same place where I got the upper code also, this should show the count, But it won't work

function updateNotificationCount() {
  var count = 0;
  count = parseInt($('span.count').html()) || 0;
  count++;
  $('span.count').html(count);
}