JSFiddle - React, Tailwind, and code Playground
HTML
<form id="form">
<select id="select" onChange="this.form.submit">
<option value="0">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="row" type="hidden" name="row" value="4">
</form>
<form name="proses" id="proses">
<div id="main">
<div id="heading"> <span> </span>
</div>
<div id="mainList"></div>
</div>
<div id='processSubmit'></div>
</form>
<div id='log'></div>
CSS
span {
margin: 2px;
width: 80px;
display: inline-block;
}
#log {
padding:20px 10px;
border:1px solid blue;
background:rgba(120, 120, 33, .4);
}
div {
margin:2px;
border:1px solid green;
padding:2px;
}
JavaScript
function log(txt) {
$("#log").append("<br/>" + txt);
}
$(document).ready(function () {
$("#select").change(function () {
var a = $("#select").val();
var r = $("#row").val();
var line = 1;
log(a);
log(r);
r1 = 1;
$("div#mainList").empty();
$("div#heading").html('<span> </span>');
$("div#row").empty();
for (i = 0; i < a; i++) {
$("div#heading").append("<span>KW2</span><span>KW3</span>");
}
for (i2 = 0; i2 < r; i2++) {
$("div#mainList").append("<div id='row-" + i2 + "'><span>Error" + line + "</span></div>");
line++;
log("line:" + line);
for (i = 0; i < a; i++) {
//$("div#heading").append("<span>KW2</span><span>KW3</span>");
$("div#row-" + i2).append("<span><input type='text' size='6' value='kw2" + i + r1 + "' /></span><span><input type='text' size='6' value='kw3" + i + r1 + "' /></span>");
log("line2:" + i);
}
r1++;
}
$("#prosesSubmit").html("<button type='submit'>Prosess</button>");
});
});