JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="myList">
	</ul>

 <button onclick="displayCheckedGroup()">Display checked items</button>

CSS

ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

li{
    clear: left;
    font-size: 25px;
    padding: 3px 0px 3px 10px;
    margin: 0px;
}

li input{
    float: right;
    margin-right: 15px;
    width: 25px;
    height: 25px;
}

li:nth-child(even){
    background-color: #eee;
}

JavaScript

for(var i = 0 ; i<5; i++){

	var node = document.createElement("li");
	var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox"); 
    x.id="in"+i;
    node.appendChild(x);
	var textnode = document.createTextNode("item"+i);
	node.appendChild(textnode);
	document.getElementById("myList").appendChild(node);
  }

function displayCheckedGroup(){
    for(var i = 0;i <5;i++){
        if(document.getElementById("in"+i).checked == true){
            alert(i);
        }
    }
}