JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

    <div class="box">
    <div class="row">
    <div class="col-lg-12">
    <header>
    <h5>No. Pindaan [<span id="pindaan"> </span>] Tarikh Berkuatkuasa [<span id="tarikh"> </span>] </h5>
    </header>
    <div id="div-4" class="body">
    <div class="x_content">
    <!-- Initialize jsTree -->
    <div id="folder_jstree" title=""></div>
    <!-- Store folder list in JSON format -->
    <textarea style="" id='txt_folderjsondata'>[{"id":"658","parent":"#","text":"100 PENTADBIRAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'>FAIL BARU<\/span> <span id='open'><\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"659","parent":"#","text":"200 PENGURUSAN TANAH & BANGUNAN <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 666 TARIKH BERKUATKUASA 2020-06-25 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"660","parent":"#","text":"300 PENGURUSAN ASET <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'> <\/span> <span id='open' style='font-size:9px;'><\/span> <span id='open'>(NO.PINDAAN 777 TARIKH BERKUATKUASA 2020-06-19 )<\/span>","category":"JTM","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}},{"id":"661","parent":"#","text":"400 PENGURUSAN KEWANGAN <span id='open'...