Color show not properly in the js tree

I have a problem to get the color in the js tree. Below is my coding:

<?php 
   $folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management where is_approved = 1");
   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
            $parentid = $row['parentid'];
            $siri_pindaan = $row['siri_pindaan'];
            $effective_date = $row['effective_date'];
            $filing_code_refer = $row['filing_code_refer'];
            $filing_code_link = $row['filing_code_link'];
            $row_name = $row['name'];

    $testing = "<span onclick='printing_dir_1("ringasan", "form", "print","".$row['id']."");'>$row_name</span>";
                          
      // echo $siri_pindaan;
      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" => $testing. ' ' ."<span id='open' style='font-size:9px;'>".$refer_to_code .$row['filing_code_refer']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$link_to_code .$row['filing_code_link']."</span>" .' '. "<span id='open' style='font-size:9px;'>".$row['description_update']."</span>".' '. "<span style='display:none;' id='open'>".$siri_pindaan_edit."</span>",
            "category" => $row['category'],
            "filing_code_refer" => $row['filing_code_refer'],
            // "status" => $row['status'], // status 0 is inactive, status 1 is active
            "data" => array("status" => $row['status'],"add_underline"=>$row['add_underline']) ,
            "state" => array("selected" => $selected,"opened"=>$opened) 
     
      );
   }

   ?> 

This is javascript:

   .jstree({
          'core': {
            'data': folder_jsondata,
            'multiple': false
          },
          'plugins': ['sort'],
          'sort': function(a, b) {
            return this.get_text(a).localeCompare(this.get_text(b), 'en', {
              numeric: true
            });
          }
        });

        var getColor = function(i) {
          if (i >= 100 && i <= 199) {
            return "blue";
          } else if (i >= 200 && i <= 299) {
            return "red";
          } else if (i >= 300 && i <= 399) {
            return "yellow";
          } else if (i >= 400 && i <= 499) {
            return "purple";
          } else if (i >= 500 && i <= 599) {
            return "green";
          } else {
            return "#000";
          }
        };
        
          var tree = $('#folder_jstree').jstree(true);
          nodelist.forEach(function(n) {
            tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(103, 3), 10))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline);
            tree.redraw_node(n.id); //Redraw tree
            // $($(tree.get_node(n.id,true)).children().find('span')).each(function(i, e){
            // $(e).css('color', 'getColor(parseInt(n.text.substr(5, 3), 10))')
            // })
            colorNodes(n.children); //Update leaf nodes
          });
        };

        $('#folder_jstree').bind('load_node.jstree', function(e, data) {
          var tree = $('#folder_jstree').jstree(true);
          colorNodes(tree.get_json());
        });

My output cannot follow the number to present the color if I’ve added “$testing” variable word in the front of the number.Like below the picture:

Actually I want the output like below the picture. The color can show infront of number.

This is my working jsfiddle: https://jsfiddle.net/jv4k1f0s/1/

Hope someone can guide me how to solve it. Thanks.

Answer

To take the easy way out, you can change the position of text in span tag to First.

Example:

This is your data:

[{"id":"824","parent":"#","text":"<span onclick='printing_dir_1("ringasan", "form", "print","824");'>101 PENTADBIRAN AM</span> <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 style='display:none;' id='open'></span>","category":"","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]

You can change position MasterName in text key to first, like this:

[{"id":"824","parent":"#","text":"101 PENTADBIRAN AM<span onclick='printing_dir_1("ringasan", "form", "print","824");'></span> <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 style='display:none;' id='open'></span>","category":"","filing_code_refer":"","data":{"status":"1","add_underline":"0"},"state":{"selected":false,"opened":false}}]

And after that, you need to replace this function:

getColor(parseInt(n.text.substr(103, 3), 10))

To this:

getColor(parseInt(n.text.substr(0, 3), 10))

Updated: You can keep your data template

Try use foreach loop like this:

nodelist.forEach(function(n) {
          
            let masterTextTag = $($(tree.get_node(n.id,true)))
            
            if(masterTextTag !== undefined && masterTextTag.length != 0){
                let masterText = masterTextTag[0].textContent
              tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(masterText.substr(0, 3), 10))+ ";"+"text-decoration:" + getStrike(n.data.status) + getUnderline(n.data.add_underline);
              tree.redraw_node(n.id); //Redraw tree
        
              colorNodes(n.children); //Update leaf nodes
            }
            
          });