JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="nested">
    <li id="list_1"></li>
    <li id="list_2">
        <ol>
            <li id="list_3">
                <ol>
                    <li id="list_4"></li>
                    <li id="list_5"></li>
                </ol>
            </li>
            <li id="list_6"></li>
        </ol>
    </li>
    <li id="list_7"></li>
</ol>

CSS

ol {
    margin-left:10px;
    border-left:1px solid green;
}

JavaScript

function appendItemToList(parentId) {
    var $thelist = $("#list_"+parentId),
        $ol = $thelist.find("> ol");
    
    if(!$ol.length) {
        $ol = $("<ol />").appendTo($thelist);
    }
    $ol.append("<li id=''></li>");
}

appendItemToList(1);
appendItemToList(2);
appendItemToList(2);
appendItemToList(3);
appendItemToList(4);
appendItemToList(6);
appendItemToList(6);
appendItemToList(7);

$("li").each(function(idx,elem){
    var elemId = $(elem).attr("id");
    if(elemId) {
        $(elem).prepend(elemId);
    } else {
        $(elem).prepend("list_new");
    }
});