Javascript 克隆对象旁边不显示弹出消息

我有一个面板，有3个可拖动的对象和一个背景图像。我的JavaScript脚本（基于

interact.js

）允许在背景图像上拖放对象。所有可拖动的对象也可克隆。这意味着每次我从面板拖动原始对象时，它都会被克隆

现在我想添加一个弹出功能：当我点击一个对象时，应该会出现一条弹出消息。问题是，弹出消息显示在原始对象旁边，而不是克隆对象旁边。我希望在我单击的对象（不包括原始对象）旁边显示一条弹出消息。我怎么做？这是一段与弹出窗口相关的JavaScript代码：

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

整个代码：

HTML（属于类

拖动基的圆形对象的示例）：

<div id="drag-base" class="popup draggable" onclick="myFunction()">
   <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

#drag-base {
      background: #d9534f;
      color: #000000;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      text-align: center;
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    } 

.dropzone {
      background-color: #e9ebed;
      padding: 10px;
      width: 100%;
      height: 600px;
      overflow-y: scroll;
      border: dashed 4px transparent;
      float:left;
    }

    .drop-active {
      border-color: #aaa;
    }

    .drop-target {
      background-color: #3f5265;
      color: #FFF;
      border-color: #fff;
      border-style: solid;
    }

    /* Popup container - can be anything you want */
    .popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* The actual popup */
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

    /* Popup arrow */
    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    /* Toggle this class - hide and show the popup */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
        from {opacity: 0;} 
        to {opacity: 1;}
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity:1 ;}
    }

<script type="text/javascript">
    // target elements with the "draggable" class
    interact('.draggable').draggable({
        inertia: true,
        restrict: {
          restriction: ".dropzone",
          drag: document.getElementById('dropzone'),
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        autoScroll: true,
        onmove: function (event) {
          var target = event.target;   
          var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
          var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

          target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

          target.setAttribute('data-x', x);
          target.setAttribute('data-y', y);
        },
        onend: function(event) {
            console.log(event);
        }
    })
    .on('move', function (event) {
    var interaction = event.interaction;
    if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') {
      var original = event.currentTarget;
      var clone = event.currentTarget.cloneNode(true);
      var x = clone.offsetLeft;
      var y = clone.offsetTop;
      clone.setAttribute('clonable','false');
      clone.style.position = "absolute";
      clone.style.left = original.offsetLeft+"px";
      clone.style.top = original.offsetTop+"px";
      original.parentElement.appendChild(clone);
      interaction.start({ name: 'drag' },event.interactable,clone);
    }
    })
    .resizable({
        edges: { left: true, right: true, bottom: true, top: true }
    })
    .on('resizemove', function (event) {
        var target = event.target;
            x = (parseFloat(target.getAttribute('data-x')) || 0),
            y = (parseFloat(target.getAttribute('data-y')) || 0);

        // update the element's style
        target.style.width  = event.rect.width + 'px';
        target.style.height = event.rect.height + 'px';

        // translate when resizing from top or left edges
        x += event.deltaRect.left;
        y += event.deltaRect.top;

        target.style.webkitTransform = target.style.transform =
            'translate(' + x + 'px,' + y + 'px)';

        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
        //target.textContent = event.rect.width + '×' + event.rect.height;
      });

    // enable draggables to be dropped into this
    interact('.dropzone').dropzone({  
      // Require a 50% element overlap for a drop to be possible
      overlap: 0.50,

      // listen for drop related events:

      ondropactivate: function (event) {
        // add active dropzone feedback
        event.target.classList.add('drop-active');
      },
      ondragenter: function (event) {
        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;

        // feedback the possibility of a drop
        dropzoneElement.classList.add('drop-target');
      },
      ondragleave: function (event) {
        // remove the drop feedback style
        event.target.classList.remove('drop-target');
      },
      ondrop: function (event) {
        //event.relatedTarget.textContent = 'Dropped';
      },
      ondropdeactivate: function (event) {
        // remove active dropzone feedback
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
      }
    });

    $(".dropzone").html("<img src='https://s-media-cache-ak0.pinimg.com/originals/fb/d5/55/fbd5556e0e364b31166bebfce433c14e.jpg'>");

    // When the user clicks on div, open the popup
    function myFunction() {
        var popup = document.getElementById("myPopup");
        popup.classList.toggle("show");
    }

</script>

JavaScript:

<div id="drag-base" class="popup draggable" onclick="myFunction()">
   <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

#drag-base {
      background: #d9534f;
      color: #000000;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      text-align: center;
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    } 

.dropzone {
      background-color: #e9ebed;
      padding: 10px;
      width: 100%;
      height: 600px;
      overflow-y: scroll;
      border: dashed 4px transparent;
      float:left;
    }

    .drop-active {
      border-color: #aaa;
    }

    .drop-target {
      background-color: #3f5265;
      color: #FFF;
      border-color: #fff;
      border-style: solid;
    }

    /* Popup container - can be anything you want */
    .popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* The actual popup */
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

    /* Popup arrow */
    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    /* Toggle this class - hide and show the popup */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
        from {opacity: 0;} 
        to {opacity: 1;}
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity:1 ;}
    }

<script type="text/javascript">
    // target elements with the "draggable" class
    interact('.draggable').draggable({
        inertia: true,
        restrict: {
          restriction: ".dropzone",
          drag: document.getElementById('dropzone'),
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        autoScroll: true,
        onmove: function (event) {
          var target = event.target;   
          var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
          var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

          target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

          target.setAttribute('data-x', x);
          target.setAttribute('data-y', y);
        },
        onend: function(event) {
            console.log(event);
        }
    })
    .on('move', function (event) {
    var interaction = event.interaction;
    if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') {
      var original = event.currentTarget;
      var clone = event.currentTarget.cloneNode(true);
      var x = clone.offsetLeft;
      var y = clone.offsetTop;
      clone.setAttribute('clonable','false');
      clone.style.position = "absolute";
      clone.style.left = original.offsetLeft+"px";
      clone.style.top = original.offsetTop+"px";
      original.parentElement.appendChild(clone);
      interaction.start({ name: 'drag' },event.interactable,clone);
    }
    })
    .resizable({
        edges: { left: true, right: true, bottom: true, top: true }
    })
    .on('resizemove', function (event) {
        var target = event.target;
            x = (parseFloat(target.getAttribute('data-x')) || 0),
            y = (parseFloat(target.getAttribute('data-y')) || 0);

        // update the element's style
        target.style.width  = event.rect.width + 'px';
        target.style.height = event.rect.height + 'px';

        // translate when resizing from top or left edges
        x += event.deltaRect.left;
        y += event.deltaRect.top;

        target.style.webkitTransform = target.style.transform =
            'translate(' + x + 'px,' + y + 'px)';

        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
        //target.textContent = event.rect.width + '×' + event.rect.height;
      });

    // enable draggables to be dropped into this
    interact('.dropzone').dropzone({  
      // Require a 50% element overlap for a drop to be possible
      overlap: 0.50,

      // listen for drop related events:

      ondropactivate: function (event) {
        // add active dropzone feedback
        event.target.classList.add('drop-active');
      },
      ondragenter: function (event) {
        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;

        // feedback the possibility of a drop
        dropzoneElement.classList.add('drop-target');
      },
      ondragleave: function (event) {
        // remove the drop feedback style
        event.target.classList.remove('drop-target');
      },
      ondrop: function (event) {
        //event.relatedTarget.textContent = 'Dropped';
      },
      ondropdeactivate: function (event) {
        // remove active dropzone feedback
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
      }
    });

    $(".dropzone").html("<img src='https://s-media-cache-ak0.pinimg.com/originals/fb/d5/55/fbd5556e0e364b31166bebfce433c14e.jpg'>");

    // When the user clicks on div, open the popup
    function myFunction() {
        var popup = document.getElementById("myPopup");
        popup.classList.toggle("show");
    }

</script>


//具有“draggable”类的目标元素
交互（'.draggable'）.draggable({
惯性：没错，
限制：{
限制：“.dropzone”，
拖动：document.getElementById（'dropzone'），
是的，
elementRect:{top:0，left:0，bottom:1，right:1}
},
autoScroll：是的，
onmove：函数（事件）{
var target=event.target；
var x=（parseFloat（target.getAttribute（'data-x'））| | 0）+event.dx；
变量y=（parseFloat（target.getAttribute（'data-y'））| | 0）+event.dy；
target.style.transform='translate（'+x+'px'，+y+'px'）；
target.setAttribute（'data-x'，x）；
target.setAttribute（'data-y'，y）；
},
ONED：功能（事件）{
console.log（事件）；
}
})
.on（'move'，函数（事件）{
var交互=事件交互；
if（interaction.pointerIsDown&&！interaction.interaction（）&&event.currentTarget.getAttribute（'clonable'）！='false'））{
var original=event.currentTarget；
var clone=event.currentTarget.cloneNode（true）；
var x=clone.offsetLeft；
var y=clone.offsetTop；
setAttribute（'clonable'，'false'）；
clone.style.position=“绝对”；
clone.style.left=original.offsetLeft+“px”；
clone.style.top=original.offsetTop+“px”；
original.parentElement.appendChild（克隆）；
interaction.start（{name:'drag'}，event.interactiable，clone）；
}
})
.可调整大小({
边：{left:true，right:true，bottom:true，top:true}
})
.on（'resizemove'，函数（事件）{
var target=event.target；
x=（parseFloat（target.getAttribute（'data-x'））| | 0），
y=（parseFloat（target.getAttribute（'data-y'））| | 0）；
//更新元素的样式
target.style.width=event.rect.width+'px'；
target.style.height=event.rect.height+'px'；
//从上边缘或左边缘调整大小时平移
x+=event.deltaRect.left；
y+=event.deltaRect.top；
target.style.webkitttransform=target.style.transform=
'翻译（'+x+'px'，+y+'px）'；
target.setAttribute（'data-x'，x）；
target.setAttribute（'data-y'，y）；
//target.textContent=event.rect.width+'×'+event.rect.height；
});
//允许将可拖动项拖放到此
交互（'.dropzone'）。dropzone（{
//需要50%的元件重叠，才能进行跌落
重叠：0.50，
//侦听与拖放相关的事件：
ondropactivate:功能（事件）{
//添加主动dropzone反馈
event.target.classList.add（'drop-active'）；
},
ondragenter:函数（事件）{
var draggableElement=event.relatedTarget，
dropzoneElement=event.target；
//反馈下降的可能性
dropzoneElement.classList.add（'drop-target'）；
},
ondragleave:函数（事件）{
//删除下拉反馈样式
event.target.classList.remove（'drop-target'）；
},
ondrop：功能（事件）{
//event.relatedTarget.textContent='Dropped'；
},
ondropdeactivate:功能（事件）{
//删除活动dropzone反馈
event.target.classList.remove（'drop-active'）；
event.target.classList.remove（'drop-target'）；
}
});
$（“.dropzone”）.html（“”）；
//当用户单击div时，打开弹出窗口
函数myFunction（）{
var popup=document.getElementById（“myPopup”）；
popup.classList.toggle（“显示”）；
}
使用类而不是ID，并使用DOM遍历在单击的元素中查找弹出窗口。将单击的元素传递给函数：

<div id="drag-base" class="popup draggable" onclick="myFunction(this)">
   <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

function myFunction(div) {
    div.querySelector(".popuptext").classList.toggle("show");
}

这是因为一个特定的id在页面上只能出现一次。你必须给克隆的元素一个唯一的id，或者以某种方式使用类。@sn3ll:谢谢，我怎样才能用JavaScript动态地给克隆的对象一个唯一的id？我刚刚测试过。谢谢