JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<ul id="parent" class="level-1">
    <li class="child item-i">I</li>
    <li class="child item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1"><div><a class="edit" href="1">1</a>&nbsp;<a href="11" class="add">11</a></div></li>
                    <li class="item-2"><div><a class="edit" href="2">2</a>&nbsp;<a href="22" class="add">22</a></div></li>
                    <li class="item-3"><div><a class="edit" href="3">3</a>&nbsp;<a href="33" class="add">33</a></div></li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class=" child item-iii">III</li>
</ul>

JavaScript

$(document).ready(function () {
    
    $( "#parent > li > ul > li > ul > li a.edit" ).each( function() {
         var child3Link = $( this ).attr("href");
        $( this ).attr("href", child3Link + "&testEdit");
    });
    
       $( "#parent > li > ul > li > ul > li a.add" ).each( function() {
         var child3Link = $( this ).attr("href");
        $( this ).attr("href", child3Link + "&testAdd");
    });
    
     $( "#parent > li > ul > li " ).append(" - id 2");
         $( "#parent > li   ").append(" - id 1");
});