JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<ul class="nav navbar-nav navbar-right">
    <li class="dropdown" id="get-info-list"> <span id="info-count"></span>
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-list-alt"></i></a>

        <ul class="dropdown-menu" id="infolist" role="menu">
           <!--Items should be loaded here-->
        </ul>
    </li>
</ul>

JavaScript

$(document).ready( function(){


    $('#get-info-list').on('click', function(event) {
        console.log('cool');        
        event.preventDefault();
        alert('hiiiiiii');
        $.getJSON('getNotification', function(data) {
             console.log(data);
             $("#infolist").append(data);
        });
    });
});