拖放一次添加许多项目

Question

我必须创建拖放的对象（就像它们是条形表一样）。当我将第一个与“原始”功能一起使用时，它可以正常工作。然后程序从“表”编号10开始，当我单击“创建表”按钮时，我应该创建另一个按钮，我已经创建了第二个ID，但是我“阻止了”这两个ID，并且应该能够同时移动两者或所有我想相信的。这是我的代码。

<script>
    $(function () {
        $("#draggable").draggable({
            containment: "parent"
        });
    });
</script>

<div class="contenedor" id="sector">
    <div id="draggable" class="mesas ui-widget-content">
        <p class="numMesa">10</p>
    </div>
</div>
<input type="button" value="Crear mesa" class="menu" id="creador"> 
<div class="contenedor" id="sector">
    <div id="draggable" class="mesas ui-widget-content">
        <p class="numMesa">10</p>
    </div>
</div>
<input type="button" value="Crear mesa" class="menu" id="creador"> 

<div class="contenedor" id="sector">
    <div id="draggable" class="mesas ui-widget-content">
        <p class="numMesa">10</p>
    </div>
</div>
<input type="button" value="Crear mesa" class="menu" id="creador"> </body>
<script>
$("#creador").on("click", function () {
    document.getElementById("sector").innerHTML = '<div id="draggable" class="mesas ui-widget-content"><p class="numMesa">10</p></div>';
});