JSFiddle - React, Tailwind, and code Playground
HTML
<div id="alertsDiv">
</div>
<button type="button" onclick="build('name')">Build table</button>
JavaScript
function build(name){
var myTableDiv = document.getElementById("alertsDiv");
var table = document.createElement('TABLE');
var tr;
var i, j;
var rowsNum = 0;
table.style="width:90%; text-align: center; font-size: 13px; border: 1px solid black; border-collapse: collapse";
table.id = "tbAlerts";
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
tableBody.id = "tbBody";
//users is an array
for ( i=0; i< 10 ; i++) {
tr = document.createElement('TR');
var localname = name + i;
tr.id = localname+" row";
//alert("this is the tr id: " +tr.id);
tableBody.appendChild(tr);
//the time
td = document.createElement('TD');
var d = new Date();
td.appendChild(document.createTextNode( d.getHours() +":"+ d.getMinutes() +":"+ d.getSeconds() ));
tr.appendChild(td);
//severity
td = document.createElement('TD');
td.appendChild(document.createTextNode("minor"));
tr.appendChild(td);
//alert
var td = document.createElement('TD');
td.appendChild(document.createTextNode(localname + " is dead"));
tr.appendChild(td);
//comments
td = document.createElement('TD');
var txtBox = document.createElement('INPUT');
txtBox.type = 'text';
txtBox.placeholder="comments";
td.appendChild(txtBox);
tr.appendChild(td);
//Acknowledge - ***THIS IS THE IMPORTANT THING***
td = document.createElement('TD');
var newCheckBox = document.createElement('INPUT');
newCheckBox.type = 'checkbox';
rowsNum++;
newCheckBox.name=localname;
newCheckBox.addEventListener("click", cleanAlert, false);
td.width='10px';
td.appendChild(newCheckBox);
tr.appendChild(td);
}
myTableDiv.appendChild(table);
}
function cleanAlert(event) {
alert('cleanAlert called!');
var checkbox = event.target;
var rowIndex;
rowIndex = document.getElementById(checkbox.name + " row").rowIndex;
...