Javascript Bootstrap 3 popover作为嵌套的messagebox/comment插件

我正在制作一个评论插件。在一个页面上可以有几个评论框。输入注释后，应立即在注释框中显示。我已经建立了一个样本，但我有两个基本问题

• 当我从一个评论框中输入评论时，它会正确输入，但当我移动到第二个和第三个框时，评论会重复
• 当我离开popover时，输入的注释将被删除

HTML

<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>

脚本

$('.chatboxPlugin').on('show.bs.popover', function () {
    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> \
    </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').on('click','.addComment',function(e){
        e.preventDefault(e);
        content = $(this).parents().eq(5);
        commentArea = content.children('.commentArea');
        // alert(commentArea.html());
        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> ";
        commentArea.append(comment);
        return;
    })


})

$('[data-toggle="popover"]').popover();

$（'.chatboxPlugin'）.on（'show.bs.popover'，function（）{
内容=”\
\
\
\
您好……
\
\
\
\
\
嘿\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
";
$（this.attr（{'data-content'：content}）；
$（'body'）。在（'click'，'addComment'，函数（e）上{
e、 防止违约（e）；
content=$（this.parents（）.eq（5）；
commentArea=content.children（'.commentArea'）；
//警报（commentArea.html（））；
注释=”\
\
“+$（this）.parents（）.eq（1）.children（'.comment'）.val（）+”
\
\
";
附加（注释）；
返回；
})
})
$（'[data toggle=“popover”]'）。popover（）；

我在这里创建了一个工作JS小提琴

怎么样

我使用了jquery的

数据
方法来保存数据