JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<i type="button" class="glyphicon glyphicon-plus chatboxPlugin" data-content='sadf' data-container="body" data-toggle="popover" data-placement="bottom" data-html=true ></i>
<br>
<i type="button" class="glyphicon glyphicon-plus chatboxPlugin" data-content='sadf' data-container="body" data-toggle="popover" data-placement="bottom" data-html=true ></i>
<br>
<i type="button" class="glyphicon glyphicon-plus chatboxPlugin" data-content='sadf' data-container="body" data-toggle="popover" data-placement="bottom" data-html=true ></i>
<br>

<i type="button" class="glyphicon glyphicon-plus chatboxPlugin" data-content='sadf' data-container="body" data-toggle="popover" data-placement="bottom" data-html=true ></i>
<br>

JavaScript

$('.chatboxPlugin').on('show.bs.popover', function (a) {
    $('.chatboxPlugin').not(this).popover('hide');
    var olddata = "";
    if($(this).data('comments')){
        //console.log($(this).data('comments'));
        $.each($(this).data('comments'),function(index,value){
            olddata = olddata + value;
        })
    }
	var content ="<div class='row'> \
  	<div class='col-xs-12 commentArea'> \
	    <div class='row'> \
	      <div class='col-xs-11 pull-left'> \
	        <p><i class='fa fa-user'>&nbsp;</i>Hi.....</p> \
	      </div> \
	    </div> \
	    <div class='row'> \
	      <div class='col-xs-11 col-xs-offset-1 text-right pull-right'> \
	       <p> Hey..........&nbsp;<i class='fa fa-user'></i></p> \
	      </div> \
	    </div> \
"+olddata+"\
	</div>\
    <div class='col-xs-12'> \
	    <div class='row'> \
	      <div class='col-xs-12'> \
	        <div class='input-group'> \
	            <input type='text' class='form-control comment' placeholder='Add Your Comment&hellip;'> \
	            <span class='input-group-btn'> \
	               <button type='submit' class='btn btn-default addComment'><i class='glyphicon glyphicon-plus'></i></button> \
	            </span> \
	        </div> \
	      </div> \
	    </div> \
  	</div> \
</div>";
	$(this).attr({'data-content':content});
	$('body').off('click').on('click','.addComment',function(e){
		e.preventDefault(e);
        var $this = $(this);
		var content = $this.parents().eq(5);
		var commentArea = content.children('.commentArea');
		// alert(commentArea.html());
		var comment = "<div class='row'> \
	      <div class='col-xs-11 col-xs-offset-1 text-right pull-right'> \
	       <p>"+$this.parents().eq(1).children('.comment').val()+" <i class='fa fa-user'></i></p> \
	      </div> \
	    </div> ";
        $this.closest('.input-group').find('input').val("");
        var $chatboxPlugin = $(a.currentTarget);
        var data = [];
        if($chatboxPlugin.data('comments')){
           data =...