JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='tree'>
    <li data-id="1" data-parent="0">Home
        <ul>
            <li data-id="2" data-parent="1">About
                <ul>
                    <li data-id="4" data-parent="2">What we do</li>
                </ul>
            </li>
            <li data-id="3" data-parent="1">Contact
                <ul>
                    <li data-id="5" data-parent="3">Employees
                        <ul>
                            <li data-id="6" data-parent="5">Full-time</li>
                            <li data-id="7" data-parent="5">Part-time</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<button id="mybutton">Click Here</button>
<section id="mysection"></section>

JavaScript

$('#mybutton').on('click', function () {

     var output = "";

     $("ul#tree li").each(function () {
         var id = $(this).data("id");
         var parent = $(this).data("parent");
         output = output + "id=" + id + "&parent=" + parent  + "&node_path=";
         
         var node_path = parent + ".";
         $(this).parents('li').each(function() {
             node_path +=  $(this).data("parent") + ".";
         });
         output += node_path.split('').reverse().join('')
         output += "<br/>";
     });

     $("#mysection").html(output);

 });