JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id='root' class='tree-node'>
        root
        <ul>
            <li class='tree-node' id='node1'>node1</li>
            <li class='tree-node' id='node2'>node2</li>
            <li class='tree-node' id='node3'>node3</li>
            <li class='tree-node' id='node4'>node4
                <ul>
                    <li class='tree-node' id='node4-1' >node4-1</li>
                    <li class='tree-node' id='node4-2' >node4-2</li>                    
                </ul>
            </li>
        </ul>
    </li>
    
<ul>

JavaScript

$(".tree-node").click(function(e){
   console.log($(this).attr("id"));
});

$(document).click(function(e){
    console.log("document clicked!");    
});