Dropping dynamically created items onto multiple dynamically created dropzones

[igorpamir]

Using Javascript, I dynamically create multiple dropzones after page load, onto which also dynamically created DIVs can be dropped. I am experiencing the error that all dropped DIVs will only be assigned to the dropzone which was created first.

Initialization code:

interact('.dropzone').dropzone({
    accept: '.droppable',
    overlap: 0.75,
  
    ondropactivate: function (event) {
    },
    ondragenter: function (event) {    
    },
    ondragleave: function (event) {
    },
    ondrop: function (event) {
        console.log("DROPZONE ID: " + $(event.dropzone.target).data("uniqueid"));

    },
    ondropdeactivate: function (event) {
    }
  })

interact('.drag-drop')
    .draggable({
      inertia: true,
      modifiers: [
        interact.modifiers.restrictRect({
          endOnly: true
        })
      ],
      autoScroll: true,
      listeners: { move: dragMoveListener }
    })

My droppable DIV:
<div class="resize-drag drag-drop droppable" data-uniqueid="12345">Foo</div>

My dropzones:

<div class="resize-drag dropzone" data-uniqueid="54321">foo</div>
<div class="resize-drag dropzone" data-uniqueid="7654321">foo</div>

As you can see at ondrop listener, I output the ID of the dropzone onto which something has been dropped. But the ID always belongs to the dropzone which has been dynamically added first to the DOM no matter where I drop the DIVs.

Does this happen to anyone else? How can that be fixed?

Working with:

• interact 1.10.17
• OSX 13.0.1
• Chrome 108.0.5359.98