jquery - Drag and Drop only when dynamically created classes match

Question

I am new to coding and I am stuck now over several days on this issue. I have read many similar questions but cannot seem to integrate the answers. Any help would be greatly appreciated.

I have dynamically created a rows/columns of divs from user entered dates and our available items

I want users to be able to move items up and down but only on the day its associated day (ie vertical drag and drop only)

Because all divs are created dynamically I am struggling to solve this. I was trying to limit drag and drop where the class match (based on their dates - day1 to day1)

Below is simplified code example

#lWrap {width: 500px; margin: 0 auto;}
#date1, #box1, #dropHolder, #drag {display:inline-block; width: 24%; border:1px solid red}
#dropHolder {border: 1px solid blue; height:30px;}
</style>


<div id = "lWrap">
<div id="box1">&nbsp;</div>
<div id="date1">2021-01-01</div>
<div id="date1">2021-01-02</div>
<div id="date1">2021-01-03</div></div>

<div id = "lWrap">
<div id="box1">Item 1</div>
<div id="dropHolder" class="drop day1"><div id="drag" class="drag day1">A1</div></div>
<div id="dropHolder" class="drop day1"><div id="drag" class="drag day1">A2</div></div>
<div id="dropHolder" class="drop day1"><div id="drag" class="drag day1">A3</div></div>
</div>

<div id = "lWrap">
<div id="box1">Item 2</div>
<div id="dropHolder" class="drop day2"><div id="drag" class="drag day2">B1</div></div>
<div id="dropHolder" class="drop day2"><div id="drag" class="drag day2">B2</div></div>
<div id="dropHolder" class="drop day2"><div id="drag" class="drag day2">B3</div></div>
</div>

<div id = "lWrap">
<div id="box1">Item 3</div>
<div id="dropHolder" class="drop day3"><div id="drag" class="drag day3">C1</div></div>
<div id="dropHolder" class="drop day3"><div id="drag" class="drag day3">C2</div></div>
<div id="dropHolder" class="drop day3"><div id="drag" class="drag day3">C3</div></div>
</div>



<script>

 $(function () {

  $(".drop").droppable({ 
  
      over: function(ev, ui)
       { $(this).css('background', 'orange'); }, 
       
       out: function(ev, ui) {
                $(this).css('background', 'none');},
        
        drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0, left: 0}).appendTo(this);
      $(this).css("background-color", 'white'); 
        }                                                   
  })
  
      $(".drag").draggable({
revert: "invalid"
       });
  });

</script>```

Answer 1

等待大神答复