JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentLeft">
    
    
    <ul id="sitemap"> 
        <li id="page_1" class="page_container"> 
            Test
            <ul>
                <li id="page_20">Nested one</li>
                <li id="page_30">nested 2</li>
                <li id="page_40"> Nested 6</li>
            </ul>
        </li> 
        <li id="page_4" class="page_container"> 
            Test
        </li> 
        <li id="page_5" class="page_container"> 
            Test
        </li> 
    </ul>
    
</div>

CSS

ul#sitemap, ul#sitemap ul { display: block; width: 300px; height: auto; background: #eee; padding: 20px; }
ul#sitemap ul { padding: 10px 0; }
ul#sitemap li { display:blcok; width: 300px; background: #ddd; margin: 5px 0; }

JavaScript

$(function() {
    $('#contentLeft ul').sortable({
        update: function() {
            var order3 = [];
            $('#contentLeft ul li').each(function(){
                order3.push($(this).attr('id').replace(/_/g, '[]=')) 
            });
            alert(order3.join('&'));
        }
    });
});