JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop_1" class="droppable"></div>
<div style="clear: both">---</div>
<a href="#" id="add_droppable">add droppable</a><br />
<div class="draggable"></div>

CSS

.droppable {
    border: 1px solid black;
    height: 100px;
    width: 100px;
    margin: 5px;
    float: left;
}
.draggable {
    border: 1px solid red;
    height: 50px;
    width: 50px;
}
.yellow {
    color: yellow;
    border: 1px solid yellow;
}

JavaScript

$('.draggable').draggable();

function makeDroppable() {
    $('.droppable').droppable({
        drop: function(event, ui) {
            $(this).css('border-color', 'green');
            $('.draggable').text($(this).attr('id'));
        },
        out: function(event, ui) {
            $(this).css('border-color', 'black');
            $('.draggable').text('');
        }
    });
}
makeDroppable();

counter = 1;
$('#add_droppable').click(function(e) {
    e.preventDefault();
    counter++;
    $('.droppable').last().after('<div id="drop_'+counter+'" class="droppable"></div>');
    makeDroppable();
});