JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dl-menu">
    <li>
         <a href="#">Parent Item 1</a>
         <ul class="dl-submenu">
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 1A</a></li>
             <li><a href="">Child Item 1B</a></li>
             <li><a href="">Child Item 1C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 2</a>
         <ul class="dl-submenu">
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 2A</a></li>
             <li><a href="">Child Item 2B</a></li>
             <li><a href="">Child Item 2C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 3</a>
         <ul class="dl-submenu">
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 3A</a></li>
             <li><a href="">Child Item 3B</a></li>
             <li><a href="">Child Item 3C</a></li>
         </ul>
    </li>
</ul>

JavaScript

/*function clone_menu_parent(){
    $(this).clone().insertAfter(".dl-back");
}
$('.dl-menu > li').each(clone_menu_parent);
*/


$('.dl-menu > li > a').each( function(){
    var $this = $(this);
    $newLI = $('<li>').append( $this.clone() );
    $newLI.prependTo(    $this.next('ul') );

    
}); // end on click