JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sort_sections" class="sections ui-sortable">
        <li class="section" id="section_141">
            rawr
            <div class="section-holder">
                <ul id="sort_content_141" class="section-content ui-sortable">       
                    <li class="content" id="content_206">
                        <a class="edit" href="#" id="content_name_206">I am content</a>
                    </li><li class="content on" id="content_203" style="position: relative; ">
                        <a class="edit" href="#" id="content_name_203">Editable and Deletable</a>
                    </li><li class="content" id="content_204" style="position: relative; ">
                        <a class="edit" href="#" id="content_name_204">aeouaeoueou</a>
                    </li>
                    
                    <li class="content" id="content_205">
                        <a class="edit" href="#" id="content_name_205">Shouldn't be deletable.</a>
                    </li>
                    
                </ul>
            </div>
        </li>
        
        <hr>
        <li class="section" id="section_142">
            rawr2
            <div class="section-holder">
                <ul id="sort_content_142" class="section-content ui-sortable">
                    
                    <li class="content" id="content_215">
                        <a class="edit" href="#" id="content_name_215">New Content</a>
                        <span class="dragger"></span>
                    </li>
                    
                    <li class="content" id="content_207">
                        <a class="edit" href="#" id="content_name_207">No Delete.</a>
                        <span class="dragger"></span>
                    </li>
                    
                </ul>
            </div>
        </li>
        
 </ul>

JavaScript

$("#sort_content_141,#sort_content_142").sortable({
        connectWith: '.section-content',
        axis: 'y',
        zIndex: 1003,
        cursor: 'crosshair',
        update: function(){
            d = $("#sort_sections > li").map(function(index, element){
                return [element.id.replace(/[a-z]+_/,""), [
                    $(element).find("li.content").map(function(subindex, subelement){
                        return subelement.id.replace(/[a-z]+_/,"");
                    }).get()]];
            }).get();
                  $.ajax({
                    type: 'post',
                    data: {'content': d},//$("#sort_content_141,#sort_content_142").sortable('serialize'),//
                    dataType: 'script',
                    complete: function(request){
                      $('#sort_contents').effect('highlight');
                      },
                    url: '/contents/sort_contents'})
                  }
    });
    $j("#sort_sections").sortable({
        connectWith: '.sections',
        axis: 'y',
        zIndex: 1003,
        cursor: 'crosshair',
        update: function(){
                  $.ajax({
                    type: 'post',
                    data: $j('#sort_sections').sortable('serialize'),
                    dataType: 'script',
                    complete: function(request){
                      $j('#sort_sections').effect('highlight');
                      },
                    url: '/sections/sort_sections'})
                  }
    });