JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://static.jstree.com/3.0.0/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0/assets/dist/themes/default/style.min.css">
<div id="tree">
    <ul>
        <li id="a">a</li>
        <li id="b">b
            <ul>
                <li id="b-a-1">b-a</li>
                <li id="b-b-2">b-b
                    <ul>
                        <li id="b-b-a">b-b-a</li>
                        <li id="b-b-b">b-b-b</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="c-1">c
            <ul>
                <li id="not-c-a-1">c-a</li>
                <li id="not-c-b-2">b-b</li>
            </ul>
            </li>

    </ul>
</div>
<button id="deselect">Deselect</button>

JavaScript

$(document).ready(function() {
    
    
$('#tree').on("select_node.jstree", function (e, data) { 
    alert("node_children: " + data.node.children);
    $('#tree').jstree(true).toggle_node(data.node); 
                                                       
    var selEl = [];
    $(this).siblings().each(function (idx, el) {
        selEl.push($(el.node).attr("id"));
    });
    console.log(selEl);                                                       
                                                       });  
$('#tree').jstree({
    "core": {
        "check_callback": true
    },
    "plugins": ["dnd"]
});

    $('#deselect').click(function(){
        
        alert('--')
        $('#tree').deselect_all(true)
        
    })
    

});