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
    },
    plugins: ["checkbox"]
  });


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