JSFiddle - React, Tailwind, and code Playground

HTML

<p class="sequence_option">Opt</p>
<p class="sequence_option">Opt</p>
<p class="sequence_option">Opt</p>
<p class="sequence_option">Opt</p>
<p class="sequence_option">Opt</p>
<div class="sequencing">Sequencing</div>

CSS

.box {
    width: 50px;
    height: 50px;
    background: #666;
    margin: 10px;
}
.sequence_option {
    /* Remove this line to watch it break */
    width: 25px;
    height: 25px;
    margin: 10px;
    border: 1px solid #333;
}

JavaScript

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

$('.sequencing').append('<div class="sequence_boxes"></div>');

$('.sequence_option').each(function (i) {
    $('<div class="box"></div>').appendTo($('.sequence_boxes'));

});


$(".box").droppable({
    accept: ".sequence_option",
    drop: function (ev, ui) {
        alert("dropped");
    }
});