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).on('click', '#get-info-list', function(event) {
            event.preventDefault();
            alert('hiiiiiii');
            $.getJSON('getNotification', function(data) {
                console.log(data);
                $("#infolist").append(data);
            });
        });