JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select id="hrs">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<div id="multiselection">
  <select id="myid" multiple="multiple">
  </select>
</div>
<span id="output"></span>

JavaScript

var data = [{
  "label": "WKS-FINGER1",
  "children": [{
    "label": "WKS1",
    "value": "WKS1"
  }, {
    "label": "WKS2",
    "value": "WKS2"
  }]
}, {
  "label": "WKS-FINGER",
  "children": [{
    "label": "WKS3",
    "value": "WKS3"
  }]
}, {
  "label": "WKS-FINGER2",
  "children": [{
    "label": "WKS4",
    "value": "WKS4"
  }]
}];

$('#myid').multiselect({
  enableClickableOptGroups: true,
  buttonWidth: '200px',
  onChange: function(option, checked, selected, element) {
    var temp = jQuery.extend(true, {}, newData);
    var selectionData = [];
    var selectionGroup = [];
    $('#myid option:selected').each(function(e) {
      for (n in newData) {
        for (d in newData[n]) {
          if (newData[n][d].value == $(this).val()) {
            for (i in temp[n]) {
              if (temp[n][i].value == $(this).val())
                temp[n].splice(i, 1);
            }

          }
        }

      }
      selectionData.push($(this).val());
    });

    for (t in temp) {
      if (temp[t].length == 0) {
        selectionGroup.push(t);
      } else {
        for (tt in newData[t]) {
          if (newData[t][tt] == temp[t][tt]) {
            selectionData.push(newData[t][tt]["value"]);
          }
        }
      }

    }
    console.log("Group : " + selectionGroup);
    console.log("Data : " + selectionData);
    $("#output").html("Group : " + selectionGroup + "<br>Data : " + selectionData);
    //alert("Group : " + selectionGroup + "\nData : " +selectionData);

  }
});
var newData = {};
$('#myid').multiselect('dataprovider', data);
var clonedData = jQuery.extend(true, {}, data);
for (i in clonedData) {
  newData[clonedData[i]["label"]] = clonedData[i]["children"];
}

$("#hrs").on("change", function() {
  var sel1 = $(this).find(":selected").val();
  var sel2 = getSelectValues(document.getElementById('myid'));
  console.log(sel1, sel2);
});
// select is an HTML select element
function getSelectValues(select) {
  var result = [];
  var options = select &&...