JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<button>add another option</button>
<div class="con">
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 1</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 2</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 3</div>
    <div class="subthing">
        <span class="handle">handle</span>
        <div>    <span class="handle">subhandle</span> subitem</div>
        <div>    <span class="handle">subhandle</span> subitem</div>
    </div>
</div>

CSS

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

JavaScript

$('button').click(function() {
	var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');
	x.appendTo('.con')
	var container = $(".con");
	container.sortable({
		handle: container.children().children(".handle")
	});
});

var container = $(".con");
container.sortable({
	handle: container.children().children(".handle")
});