JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<button>add another option</button>
<form id="form">
    <span class="con">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
    </span>
</form>

CSS

span{
    margin-top:10px;
    border:1px solid red;
    display:block;
}

JavaScript

$('button').click(function() {
    var x = $('<span></span>').attr('class', 'con');
    
    $('<div></div>').html('item 1').appendTo(x);
    $('<div></div>').html('item 2').appendTo(x);
    
    x.appendTo('#form')
    $(x).sortable({
    connectWith: ".con"
}).disableSelection();
    
});

$("span").sortable({
    connectWith: ".con"
}).disableSelection();