JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="tree">
<ul>
  <li>Buidling
    <ul>
      <li>Dept 1</li>
      <li>Dept 2
		<ul>
            <li>Office
                <ul>
                    <li>Sub-Office</li>
                </ul>
            </li>
        </ul>
		</li>
    <li>Dept 3</li>
    </ul>
	</li>
</ul>
</div>

JavaScript

$("#tree")
  .jstree({
    "core" : {
        "icons" : false
    }
});


// bind to events triggered on the tree
$("#tree").bind('ready.jstree', function (event, data) {
    $('#tree li').each(function (index,value) {
        var node = $("#tree").jstree().get_node(this.id);
        var lvl = node.parents.length;
        var idx = index;
        alert('node index = ' + idx + ' level = ' + lvl);
        
    });
});