JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-3">
<div class="well" style="width:300px; bottom: 0; top: 50px; position: fixed;">
    <div id="sidebar-wrapper" style="overflow-y: scroll; overflow-x: scroll; height: 100%;">
        <ul class="list-unstyled">
            <li class="nav-header"> 
                <a href="#" data-toggle="collapse" data-target="#userMenu">
                    <h5><b>Subscriptions </b><i class="glyphicon glyphicon-chevron-down"></i></h5>
                </a>

                <ul class="list-unstyled collapse in" id="userMenu">
                    <li><a id="id_1" href="#">Sub_1</a></li>
                    <li><a id="id_2" href="#">Sub_2</a></li>
                    <li><a id="id_3" href="#">Sub_3</a></li>
                    <li><a id="id_4" href="#">Sub_4</a></li>
                    <li><a id="id_5" href="#">Sub_5</a></li>
                    <li><a id="id_6" href="#">Sub_6</a></li>
                    <li><a id="id_7" href="#">Sub_7</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

JavaScript

$("#userMenu").children('li').click( function() {
    var rssId = $(this).children('a').attr('id');
    alert(rssId);
    $.post('url/to/post', {id : rssId})
    .success( function(data) {
        $("#changebodywithajax").html(data);
    });
});