JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="DragMe">1. Foo</div>
    <div class="DragMe">2. Bar</div>
</body>

CSS

.DragMe {
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
    // first 2 divs (what's already rendered) will be made draggable
    $(".DragMe").draggable();
    
    // insert a 3rd div, which won't be draggable
	newDraggableDiv("3. Foo");
    
    // listen for new divs added, make these new elements draggable
    $("body").on("DOMNodeInserted", ".DragMe", makeDraggable);
    
    // next 3 divs inserted are draggable
	newDraggableDiv("4. Bar");
    newDraggableDiv("5. Foo");
    newDraggableDiv("6. Bar");
});

function newDraggableDiv(text) {
    $("body").append(
    	$("<div>").text(text).addClass("DragMe")
    );
}
    
function makeDraggable() {
	$(this).draggable();
}