JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Treehouse">

</div>
<div id="mono">
This is not supposed to run until a status got checked. <br />
</div>

JavaScript

var ddlst = document.getElementById("Treehouse")
var gblStatus = [{name:"Dmenoa", checked:true}, {name:"Resa", checked:true}, {name:"Mnoa", checked:false}]

for (var i = 0; i < gblStatus.length; i++) {
  var statuser = gblStatus[i].name;
  var chkbox = document.createElement('input');
  chkbox.setAttribute("type", "checkbox");
  chkbox.value = statuser;
  chkbox.id = "chk" + statuser;
  chkbox.checked = gblStatus[i].checked;
  chkbox.addEventListener("change", (function(newVarA, newVarB, newVarC, newVarD) {
    //searchMap(gblDispatch, "Dispatcher", dispatcher, this.checked)
    searchMap(newVarA, newVarB, newVarC, newVarD);
  }(gblStatus, "Status", statuser, chkbox.checked)), false);
  ddlst.appendChild(chkbox);
  var lbl = document.createElement('label');
  lbl.innerHTML = statuser;
  lbl.htmlFor = "chk" + statuser;
  ddlst.appendChild(lbl);
  var ender = document.createElement("br");
  ddlst.appendChild(ender);
}

function searchMap(whateverA, whateverB, whateverC, whateverD) {
  var mono = document.getElementById("mono");
  if(whateverD == true)
  mono.innerHTML = mono.innerHTML + whateverC + "<br />";
  
}