nestedSortable not detecting elements after html is rendered

Question

If i add a bunch of elements to a nested sortable list, by default they go to the root and I can drag them around as normal. When i drag a parent element, the child comes with it like the image below.

If i save the list using .nestedSortable('toArray');. The hierarchy looks perfect. I save this as a json string and submit it as part of a form. When i reload the page to edit. The code rebuilds the hierarchy the exact same way except they are no longer connected. If i call .nestedSortable('toArray'); right away, only the direct children of the root element are picked up and all children are missing.

If i try to drag the parent, it's detached from the child. If i drag that child back to the root and then make it a child again, functionality returns to normal. It seems like the plugin isn't reading the children. The HTML is the exact same though. There is absolutely no difference between that I generate server side after page load and what was there before.

Here is the code I am using.

    var ns = jQuery('#wikiheirarchy').nestedSortable({
        forcePlaceholderSize: true,
        items: 'li',
        handle: 'div.inner',
        tolerance: 'pointer',
        toleranceElement: '> div',
        listType: 'ul',
        maxLevels: 6,
        opacity: .6,
        tabSize : 20,
        update: function () {
            //DO STUFF                  
        }
    }); 

This is what the server side code is generating for the plugin to use.

<ul id="wikiheirarchy" class="sortable ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded">
    <li id="wikirecord_2">
        <div class="inner">
            <strong>Title: </strong>Sample Page<br>
                <strong>Url: </strong>http://localhost:8080/wordpress/sample-page/<div>
                    <a href="javascript:removeWikiPost(2)">Delete</a>
                </div>
        </div>
    </li>
    <ul>
        <li id="wikirecord_1">
            <div class="inner">
                <strong>Title: </strong>Hello world!<br>
                    <strong>Url: </strong>http://localhost:8080/wordpress/2019/04/08/hello-world/<div>
                        <a href="javascript:removeWikiPost(1)">Delete</a>
                    </div>
            </div>
        </li>
    </ul>
    <li id="wikirecord_8">
        <div class="inner">
            <strong>Title: </strong>test ahvsdas sasfdsdcfghf<br>
                <strong>Url: </strong>http://localhost:8080/wordpress/2019/06/11/test-ahvsdas-sasfdsdcfghf/<div>
                    <a href="javascript:removeWikiPost(8)">Delete</a>
                </div>
        </div>
    </li>
    <li id="wikirecord_78">
        <div class="inner">
            <strong>Title: </strong>Test<br>
                <strong>Url: </strong>http://localhost:8080/wordpress/2019/06/27/test/<div>
                    <a href="javascript:removeWikiPost(78)">Delete</a>
                </div>
        </div>
    </li>
</ul>

Answer 1

Found the issue. The closing </li> was coming before the child <ul>. Dragging it up and back fixed this. I am not sure why, but firefox was removing the double closing li. I had a closing li after the child ul but there was also a closing li before the child list and this was what was making it go nuts.