JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" id="update" method="post">
    <ul id="nav-items" class="nav-items nested-sortable">
        <li class="nav-item list-group-item nested-1" data-id="2">
            <input type="hidden" class="menu-item-checkbox" name="menu-items[]" value="2"><span class="nav-item-title">Services</span><span class="handle">Handle</span>
            <ul class="nav-children list-group nested-sortable"></ul>
        </li>
        <li class="nav-item list-group-item nested-1" data-id="1">
            <input type="hidden" class="menu-item-checkbox" name="menu-items[]" value="1"><span class="nav-item-title">Photography</span><span class="handle">Handle</span>
            <ul class="nav-children list-group nested-sortable"></ul>
        </li>
        <li class="nav-item list-group-item nested-1" data-id="5">
            <input type="hidden" class="menu-item-checkbox" name="menu-items[]" value="5"><span class="nav-item-title">Portfolio</span><span class="handle">Handle</span>
            <ul class="nav-children list-group nested-sortable"></ul>
        </li>
    </ul>

    <br><button name="update" form="update" class="submit" type="submit">Update</button>
</form>

JavaScript

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

    // Loop through each nested sortable element
    for (var i = 0; i < nestedSortables.length; i++) {

        new Sortable(nestedSortables[i], {
            ghostClass: 'ghost-placeholder',
            handle: '.handle',
            group: 'nested',
            dataIdAttr: 'data-id',
            animation: 120,
            fallbackOnBody: true,
            invertSwap: true,
            swapThreshold: 0.60,
            emptyInsertThreshold: 30,
        });

    }