I need to dynamically generate textboxes, checkboxes, and buttons based on user input during runtime.
Users should be able to delete a specific textbox, checkbox, and button by clicking a button.
The creation process is working correctly.
However, when a user deletes one of the textboxes and associated elements, the remaining IDs should be updated accordingly, but this functionality is currently not functioning as expected.
for(i = 0; i <= k; i++) {
if (document.getElementById("cbox" + i).checked == true) {
var n = i.toString()
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id = "tbox" + i;
textbox.value = document.getElementById("texts" + i).value;
document.getElementById('frm').appendChild(textbox);
var cb = document.createElement('input');
cb.type = 'checkbox';
cb.checked = true;
cb.id = 'cbid' + i;
document.getElementById('frm').appendChild(cb);
var btn = document.createElement('input');
btn.type = 'button';
btn.value = 'delete';
btn.name = 'delete';
btn.id = i.toString();
btn.onclick = function () {
var tbx = "tbox" + this.id;
var cbx = "cbid" + this.id;
var btndel = this.id;
var x;
(elem = document.getElementById(tbx)).parentNode.removeChild(elem);
(elem = document.getElementById(cbx)).parentNode.removeChild(elem);
(elem = document.getElementById(btndel)).parentNode.removeChild(elem);
for(x = btndel + 1; x <= 10; x++) {
document.getElementById('tbox' + x).id = "tbox" + (x - 1);
document.getElementById("cbid" + x).id = "cbid" + (x - 1);
document.getElementById(x).id = x - 1;
}
document.getElementById('frm').appendChild(btn);
};