jsPlumb添加拖拽点的问题

Question

问题描述

需求是这样的，当我点击鼠标右键出来一个菜单，然后点击新建会出现右边编辑狂，当点击保存后会在我点击鼠标右键处新建一个菜单，这个菜单是我在js中用字符串拼接的，当拼接好后我给A1和Q1分别添加一个addEndpoint（其实就是相当于向元素中插入一个svg）；作为连接点，我新建第一个元素后，addEndPoint位置是在正常的，但是当我建立第二个时，addEndpoint元素没有添加到第二个新建的元素里，而是跑到了第一次新建的元素里如第一张图所示，但是位置却莫名其妙跑了好远，我在firebug中看到该元素确实是添加到第一个新建元素里的，请问，这该怎么解决？

问题出现的效果图

保存时执行的代码

 var count =0;
    $('body').on('click','#save',function(){
        console.log(ContextLeft,ContextTop);
        console.log($('.drag-area').offset().left,$('.drag-area').offset().top);
        count++;
        var cellLeft = ContextLeft-$('.drag-area').offset().left;
        var cellTop = ContextTop-$('.drag-area').offset().top;
        console.log(cellTop);
        let eleTitle=$(`<div class="drag-question" data-sign='${count}' id='${count}-question'>Q</div>`);
        let eleAnswer=$(`<div class="drag-answer" data-sign='${count}' id='${count}-answer'>A1</div>`)
        let ele = $(`<div class="drag-cell" >
               </div>`).append(eleTitle).append(eleAnswer).addClass('draggable')
        ele.css({"left":cellLeft,"top":cellTop,position: "absolute",margin:0});
        ele.draggable({containment: '.drag-area'})
        $('.drag-area').append(ele)
        jsPlumb.addEndpoint(eleAnswer, origin,{ anchors: "BottomCenter" });//起点
        jsPlumb.addEndpoint(eleTitle , destination,{ anchors: "TopCenter" });//终点
        jsPlumb.draggable(eleTitle,{containment: "parent"});//端点可以拖动设置,并且将端点限制在父级内
        jsPlumb.draggable(eleAnswer,{containment: "parent"});//端点可以拖动设置,并且将端点限制在父级内
    })
})

你期待的结果是什么？

我希望第二次新建的元素中的连接点能正确的出现在该元素里，不是如图所示，出现在了第一次新建的元素里而且跑到了很远，