JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<div class="container">
    <div class="form-group">
    
    <form action="test.php" method="POST">
       <select name="groupe_comptes" multiple="multiple">
                <option value="0">Tous les groupes de comptes</option>
                <option id="21" value="21" style="font-family: courier new ;background-color:#E6E6FA;font-weight: bold;" class="">COMPTES</option>
                    <option id="23" value="23" style="font-family: courier new ;background-color:#B0C4DE;color:black;" class="">|-&gt;EXASOLAR CORP</option>
                    <option id="22" value="22" style="font-family: courier new ;background-color:#B0C4DE;color:black;" class="">|-&gt;EXASOLAR SA</option>
                    <option id="24" value="24" style="font-family: courier new ;background-color:#B0C4DE;color:black;" class="">|-&gt;EXASOLAR SARL</option>
                    <option id="25" value="25" style="font-family: courier new ;background-color:#B0C4DE;color:black;" class="">|-&gt;EXASOLAR SL</option>
                <option id="10" value="10" style="font-family: courier new ;background-color:#E6E6FA;font-weight: bold;" class="">DISPONIBILITES</option>
                    <option id="15" value="15" style="font-family: courier new ;background-color:#B0C4DE;color:black;" class="">|-&gt;Dispo exasolar corp</option>
                    <option id="14" value="14" style="font-family: courier new ;background-color:#B0C4DE;color:black;" class="">|-&gt;Dispo exasolar SL</option>
                    <option id="13" value="13" style="font-family: courier new ;background-color:#B0C4DE;font-weight: bold;" class="">|-&gt;Disponibilits France</option>
                    <option id="11" value="11"...

JavaScript

var _str = '{"10":{"0":"0","1":"DISPONIBILITES","2":"t","style":"font-weight: bold;"},"16":{"0":"0","1":"TRESORERIE NETTE","2":"t","style":"font-weight: bold;"},"21":{"0":"0","1":"COMPTES","2":"t","style":"font-weight: bold;"},"26":{"0":"0","1":"LIGNE DE CREDIT BNP/HSBC","2":"f","style":"color:black;"},"fils_de_21":{"22":{"0":"21","1":"EXASOLAR SA","2":"f","style":"color:black;"},"23":{"0":"21","1":"EXASOLAR CORP","2":"f","style":"color:black;"},"24":{"0":"21","1":"EXASOLAR SARL","2":"f","style":"color:black;"},"25":{"0":"21","1":"EXASOLAR SL","2":"f","style":"color:black;"}},"fils_de_10":{"13":{"0":"10","1":"Disponibilits France","2":"t","style":"font-weight: bold;"},"14":{"0":"10","1":"Dispo exasolar SL","2":"f","style":"color:black;"},"15":{"0":"10","1":"Dispo exasolar corp","2":"f","style":"color:black;"},"fils_de_13":{"11":{"0":"13","1":"Dispo exasolar SA","2":"f","style":"color:black;"},"12":{"0":"13","1":"Dispo exasolar sarl","2":"f","style":"color:black;"}}},"fils_de_16":{"17":{"0":"16","1":"Trso nette exasolar SA","2":"f","style":"color:black;"},"18":{"0":"16","1":"Trso nette exasolar SL","2":"f","style":"color:black;"},"19":{"0":"16","1":"Trso nette exasolar corp.","2":"f","style":"color:black;"},"20":{"0":"16","1":"Trso nette exasolar sarl","2":"f","style":"color:black;"}}}';
var _obj = JSON.parse(_str);
console.log(_obj);


$('select[name="groupe_comptes"]').multipleSelect({
         onClick: function(view) {
         	var checkedList = checkChild(_obj,view.value);
         	for(var i = 0; i < checkedList.length ; i++){
         		$(":checkbox[value=" + checkedList[i] + "]").prop("checked",view.checked);
         	}
         	 checkParent(_obj,view.value);
         },
         countSelected : false
});


function checkChild(node,id) {
  var list = [];
  if(node['fils_de_'+id])
    for (var item in node['fils_de_'+id])
      if(item.match(/fils\_de\_(\d+)/))
        list.push(...checkChild(node['fils_de_'+id], item.split('_')[2]));
      else
       ...