Jquery拖放在拖放事件上获取自定义属性值

我正在创建一个moodboard creator，在完成拖放后尝试将所选图像的自定义属性中的值复制到新的div时遇到问题

每当拖放完成时，它总是从图像组中的第一个图像获取值，而不管我拖放哪个图像

我创建了一个更好地显示我的问题的示例。

任何帮助都会很好。谢谢：）

以下是html的一部分：（JSFIDLE中的完整代码）

解决方案如下：

问题是：

#图像的重复ID-更改为类

选择更改为的元素和属性：

var dropId = $(img).next('.hiddenInfo').data('id');
            alert(dropId);

---

有道理，谢谢你的帮助……我能不能厚着脸皮再问一个问题。我该如何选择数据隐藏垃圾或数据隐藏垃圾？没问题-使用：n个孩子或给他们自己的类名我想是的…我尝试了这个方法，但似乎不起作用，有没有关于我哪里出错的提示？我找到了一种方法，通过稍微更改html。。但是它看起来不太优雅……给第二个和第三个元素提供可以选择的不同类名。（它们也可以有hiddeninfo类：class=“hiddeninfo secondData”//$（img）.next（'.secondData'）.data（'crap'）；

 function handleDrop(e) {
 // this / e.target is current target element.
    e.preventDefault();
      if (e.stopPropagation) {
          e.stopPropagation(); // stops the browser from redirecting.
         }

       var img = document.querySelector('#images img.img_dragging');

        console.log('event: ', e);

        var newImage = new fabric.Image(img, {
             width: img.width,
             height: img.height,
      // Set the center of the new object based on the event coordinates relative
        // to the canvas container.
             left: e.layerX,
              top: e.layerY
                });
            canvas.add(newImage);

        var dropId = $('.hiddenInfo').data('id');
                alert(dropId);

        var dropId2 = $(this).closest('#images').find('.hiddenInfo').data('id');
               alert(dropId2);


       return false;
           }

var dropId = $(img).next('.hiddenInfo').data('id');
            alert(dropId);