JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<div id=mapWidget> 
<!--
  <div><input name="dzen" type="radio" value="nedzen"> Не дзен</div>
  <div><input name="dzen" type="radio" value="dzen"> Дзен</div>
  <div><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</div>
  <div><hr></div>
  <div><input name="dzen1" type="radio" value="nedzen"> Не дзен 1</div>
  <div><input name="dzen1" type="radio" value="dzen"> Дзен 1 </div>
  <div><input name="dzen1" type="radio" value="pdzen" checked> Полный дзен 1</div> 
 -->
</div>

CSS

#mapWidget { 
  background-color: rgb(230,230,230, 0.3);
  height: 100%;
  width: 250px;
}

JavaScript

var parent = document.getElementById('mapWidget');

/*
for (var i = 1; i <= 10; i++) {
	var li = document.createElement('li' );
  cb.setAttribute("id", i);
	cb.innerHTML = i;
	parent.appendChild(li);
}
*/
var layer_list = [
  {    name: 'Слой_9',    id: 'Lay_9',    checked: true,  },
  {    name: 'EBITDA 1',    id: 'Lay_1',    checked: false,    group: 'EBITDA'  },
  {    name: 'EBITDA 2',    id: 'Lay_2',    checked: false,    group: 'EBITDA'  },
  {    name: 'Слой_3',    id: 'Lay_3',    checked: true,    group: 1  },
  {    name: 'Слой_4',    id: 'Lay_4',    checked: false,    group: 1  },
  {    name: 'Слой_5',    id: 'Lay_5',    checked: true,    group: 2  },
  {    name: 'Слой_6',    id: 'Lay_6',    checked: false,    group: 2  },
  {    name: 'Слой_7',    id: 'Lay_7',    checked: false,    group: 2  },
  {    name: 'Слой_8',    id: 'Lay_8',    checked: false,    group: 2  },
  {    name: 'Слой_10',    id: 'Lay_10',    checked: false,  },
]
layer_list.map(e => {
  e.group = e.group ? e.group : 0
})
layer_list = layer_list.sort((a, b) => {
  return ('' + a.name).localeCompare(b.name);
})
layer_list = layer_list.sort((a, b) => {
  return ('' + a.group).localeCompare(b.group);  
})

function clickCheckbox(param){
  var value = param.srcElement.getAttribute('value')
  var checked = param.srcElement.checked
  var group = param.srcElement.getAttribute('group')
  var child_cnt = param.srcElement.parentElement.parentElement.childElementCount;
  // to do: control layers visibility by id 
  console.warn(`clickCheckbox:
  ${value}
  ${checked}
  ${group}  
  `)  
}  
function clickRadio(param){
	var value = param.srcElement.getAttribute('value')
  var checked = param.srcElement.checked
  var group = param.srcElement.getAttribute('group')
  var child_cnt = param.srcElement.parentElement.parentElement.childElementCount;
  // to do: control layers visibility by id 
  console.warn(`clickRadio:
  ${value}
  ${checked}
  ${group}`)
}




var delimiter = '';
var first_fl =...