prepopulate text boxes dynamically

Question

image1

Below is the code that takes all the Serial numbers and set each serial to the textboxes How to add text boxes dynamically based on the Serial count.

$("#SerialList #" + key).val(value);
if(key == "SERIALNO_LIST")
{
    var array = value.split(",");
    for(i = 0; i < array.length; i++){
        j = i + 1;
    }
    $("#SerialList #OLDSERIAL" + j).val(array[i].trim());
}

EDIT function:

function insertRow() {
  var table = document.getElementById('createTable');
  var row = table.insertRow(table.rows.length - 1);
   for (var colIndex = 0; colIndex < numOfCols; colIndex++) {
    var cell = row.insertCell(0);
    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.id = "SERIAL" + cellIndex;
    input.addEventListener('focus', function(e){
    return SerialAutoComplete(this);
    });
    cell.appendChild(input);        
    cellIndex++;
  }
}

<div id="editSerialList" title="Edit Engine Build">
<B>Group Name:</B>&nbsp;&nbsp;<input type="text" id="GROUPNAME" size="50"/>
<table cellpadding="10" id="EditTable">
<tr><td colspan="4"><div id="STATUSDIVID"  style="width:580px;"></div></td></tr>
<tr><td><input type="hidden" id="BATCHNO" name="BATCHNO"></td></tr>
 <tr>
      <td><input type="text" id="OLDSERIAL1" onfocus="SerialAutoComplete1(this)" /></td>
      <td><input type="text" id="OLDSERIAL2" onfocus="SerialAutoComplete1(this)" /></td>
      <td><input type="text" id="OLDSERIAL3" onfocus="SerialAutoComplete1(this)" /></td>
      <td><input type="text" id="OLDSERIAL4" onfocus="SerialAutoComplete1(this)" /></td>
    </tr>
    <tr>
      <td class="add-users">Add Users:</td>
      <td colspan="3" style="border:none; padding:8px;">
        <select id="addUsers2" name="addUsers2" multiple="multiple"></select>
        <input type="button" value="Add Row" name="AddRow" id="AddRow" class="button-green engineCancel" onClick="insertRow1()" /></td>
    </tr>

</table>
</div>

If my value count is 5 , I need to add 5 textboxes before setting the textboxes, ie pre-populate /add text boxes before I could set the values.

Answer 1

You can use Array() with number passed as parameter and Array.prototype.fill() with "<input>" passed as parameter, Array.prototype.join() with "" as parameter, .insertAdjacentHTML() to append HTML string to specific element within document

 let n = 5; document.body .insertAdjacentHTML("beforeend", Array(n).fill("<input>").join("")); 

alternatively using String.prototype.repeat()

 let n = 5; document.body .insertAdjacentHTML("beforeend", "<input>".repeat(n));