JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" name="element" id="element" />
<input type="button" value="Tilføj" id="add" />
<br />
<span id="MCQ-textbox">
<table id="tbl" border="1">
<tbody>
</tbody>
</table>
</span>
JavaScript
function createDynamicTable()
{
var tbody = $("#tbl");
var rows = $('#element').val();
var number_of_columns = 3;
if (tbody == null || tbody.length < 1) return;
var tfirstrow = $("<tr>");
$("<th>")
.addClass("tableCell")
.text("#")
// .data("col")
.appendTo(tfirstrow);
$("<th>")
.addClass("tableCell")
.text("Svarmulighed")
// .data("col")
.appendTo(tfirstrow);
$("<th>")
.addClass("tableCell")
.text("Hjælpetekst")
// .data("col")
.appendTo(tfirstrow);
tfirstrow.appendTo(tbody);
for (var i = 0; i < rows; i++) {
var trow = $("<tr>");
for (var c = 0; c < number_of_columns; c++)
{
var td = $("<td>")
.addClass("tableCell")
.data("col", c)
.appendTo(trow);
switch(c) {
case 0:
$("<input type=\"text\" id=\"MCQ_"+i+"__choice_number\" name=\"MCQ["+i+"].choice_number\"/>").appendTo(td);
break;
case 1:
$("<input type=\"text\" id=\"MCQ_"+i+"__choice_wording\" name=\"MCQ["+i+"].choice_wording\"/>").appendTo(td);
break;
case 2:
$("<input type=\"text\" id=\"MCQ_"+i+"__help_text\" name=\"MCQ["+i+"].help_text\"/>").appendTo(td);
break;
}
}
trow.appendTo(tbody);
}
}
$(document).ready(function () {
$('#add').click(function () {
createDynamicTable();
});
});