JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="parentUl">
        <a class="parentLink" href="somewhere">Parent Link</a>
        <ul class="childUl">
            <li class="childUl">
                <a class="childLink" href="other">Child Link</a>
            </li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style-type: disc;
    list-style-position: inside;
    }

JavaScript

try {
    $(".parentUl").each(function () {
        //build the parent link clone
        var parentLink = $(this).children(".parentLink").first().clone();
        alert($(this).children(".parentLink").innerHTML);
        parentLink.removeClass("parentLink");
        parentLink.addClass("parentLinkClone");
        
        //build the li "clone" - which isn't a clone at all, really
        var li = $(document.createElement("li"));
        li.addClass("parentUlClone");
        
        //add the link to the li element
        li.prepend(parentLink);
        
        //add the newly created li element to the childUl
        var childUl = $(this).children(".childUl").first();
        childUl.prepend(li);
    });
}
catch (e) {
    alert(e.message);   
}