JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<div id="sortable">
      <ul class="sortable">
        <li class="ui-state-highlight">         
          <label for="anyAll"> of the following:</label>
          <ul class="sortable">
            <li class="ui-state-highlight s">Item 1</li>
            <li class="ui-state-highlight s">Item 2</li>
            <li class="ui-state-highlight s c">              
              <label for="anyAll"> of the following:</label>
              <ul class="sortable">
                <li class="ui-state-highlight s">Item 1</li>
                <li class="ui-state-highlight s">Item 2</li>
                <li class="ui-state-highlight s">Item 3</li>
                <li class="ui-state-highlight s">Item 4</li>
                <li class="ui-state-highlight s">Item 5</li>
                <li class="ui-state-highlight s">Item 6 is installed</li>
                <li class="ui-state-highlight cntrl">
                  <button class="add ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-plus"></span><span class="ui-button-text">Add criteria</span></button>
                </li>
              </ul>
            </li>
            <li class="ui-state-highlight s">Item 4</li>
            <li class="ui-state-highlight s">Item 5</li>
            <li class="ui-state-highlight s">Item 6</li>
            <li class="ui-state-highlight cntrl">
              <button class="add ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-plus"></span><span class="ui-button-text">Add criteria</span></button>
            </li>
          </ul>
        </li>
      </ul>
    </div>

CSS

#sortable button.ui-state-default {
	background: none;
	border: none;
	color: #999;
	font-weight: normal;
}
label + h3, label+p {
	margin-top: 0;
}
#sortable ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: auto;
}
#sortable li {
	margin: 0 3px 3px 3px;
	padding: 0.4em;
	padding-left: 1.5em;
	font-size: 14px;
	height: 18px;
	position: relative;
}
#sortable li.cntrl {
	padding:0;
}
li.cntrl button{
	margin-left:-.5em;
}
#sortable li span.grip {
	position: absolute;
	margin-left: -1.3em;
}
.ul-li-desc {
	word-wrap: normal;
}
#sortable li {
	height: auto;
}
#sortable .ui-state-highlight {
	border: none;
	border-top: 1px solid #ddd;
	background: none;
	font-weight: normal;
	color: #333;
}
li button.edit {
	margin-left: 1em
}
/**/
#sortable button.ui-button.ui-state-default:hover {
	background-color:rgba(255,255,255,.5);
}

JavaScript

$( document ).ready(function() {
    $( "#accordion" ).accordion({ collapsible: true });
    //$( ".sortable" ).sortable({ items: "> li.s" });
		
		$( ".sortable" ).sortable({ items: "> li.s", connectWith:'.sortable' });
    $( ".sortable" ).disableSelection();
    $( "li.cntrl" ).sortable({ disabled: true });
});
/* there was more code below for controls but the problem exists with just this. */