JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div class="panel-collapse">
    <div class="panel-body" style="overflow-y: scroll; height: 250px;">
        <ul class="chat" id="list"> 
           <li class="left clearfix">
                <span class="chat-img pull-left">
                    <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                </span>
                <div class="chat-body clearfix">
                     <div class="header">
                         <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">
                         <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
                      </div>
                      <p> PUT HERE SOME OF TEXT OF CHAT </p>
                </div>
           </li>
           <li> ALL ATTRIBUTES IN PREVIOUS LI AND NEW MESSAGE WILL BE HERE </li>
        </ul>
    </div>

    <div class="panel-footer">
        <div class="input-group">
            <input id="chat-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
            <span class="input-group-btn">
                <button class="btn btn-warning btn-sm" id="btn-chat" type="submit"> Send</button>
            </span>
         </div>
    </div>

</div>

JavaScript

$(document).ready(function() {
    $('#btn-chat').click(function(e) {
        e.preventDefault();
         var new_chat = $('#chat-input').val();
        $('#list').append('<li><p>'+new_chat+'<p/></li>');
    });
});