JSFiddle - React, Tailwind, and code Playground

by ason5861_cs

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>
<style>
  label {
    display: inline-block;
    width: 5em;
  }


  #category {
    font-size: 5px;
  }

</style>
<br>

 <?php 
   $folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management");
	$arr_sql5 = db_conn_select($folderData);
	foreach ($arr_sql5 as $rs_sql5) {
    $active = $rs_sql5['status'];
}
   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }
      $folders_arr[] = array(
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $row['name'] . ' ' . "<span id='category'>". $row['category']."</span>",
         "category" => $row['category'],
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }

   ?> 

 <!-- Initialize jsTree -->
   <div id="folder_jstree" title=""></div>
   <!-- Store folder list in JSON format -->
   <textarea style="" id='txt_folderjsondata'>[{"id":"1","parent":"#","text":"100 PENTADBIRAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 PENGURUSAN TANAH & BANGUNAN <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 PENGURUSAN ASET <span id='category'>JTM<\/span>","category":"JTM","state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 PENGURUSAN KEWANGAN <span id='category'>JKP<\/span>","category":"JKP","state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500...