Q:

Dynamic text boxes generation

I want to make my text boxes dynamic, currently I have 4 text boxes added manually but want to add more 4 boxes in each row when I click on Add row button

function insertRow() {
  var table = document.getElementById("createTable");
  var row = table.insertRow(table.rows.length);
  
  var cell1 = row.insertCell(0);
  var t1 = document.createElement("input");
  t1.id = "SERIAL1" + index;
  cell1.appendChild(t1);
  
  var cell2 = row.insertCell(1);
  var t2 = document.createElement("input");
  t2.id = "SERIAL2" + index;
  cell2.appendChild(t2);
  
  var cell3 = row.insertCell(2);
  var t3 = document.createElement("input");
  t3.id = "SERIAL3" + index;
  cell3.appendChild(t3);
  
  var cell4 = row.insertCell(3);
  var t4 = document.createElement("input");
  t4.id = "SERIAL4" + index;
  cell4.appendChild(t4);

  index++;
}
<div id="popSerialList" title="Edit Engine Group">
  <B>Group Name:</B>&nbsp;&nbsp;<input type="text" id="GROUPNAME" size="50" />
  <table cellpadding="10" id="createTable">
    <tr>
      <td><input type="text" id="SERIAL1" onfocus="SerialAutoComplete(this)" /></td>
      <td><input type="text" id="SERIAL2" onfocus="SerialAutoComplete(this)" /></td>
      <td><input type="text" id="SERIAL3" onfocus="SerialAutoComplete(this)" /></td>
      <td><input type="text" id="SERIAL4" onfocus="SerialAutoComplete(this)" /></td>
    </tr>
    <tr>
      <td style="border:none;font-size:14px; padding:8px;">Add Users:</td>
      <td colspan="3" style="border:none; padding:8px;"><select id="addUsers1" name="addUsers1" style="width:300px;" multiple="multiple" style=font-size:14px;></select>&nbsp;&nbsp;<input type="button" value="Add Row" name="AddRow" id="AddRow" class="button-green engineCancel" onClick="insertRow()" /></td>
    </tr>
  </table>
</div>

When I click on AddRow button, I am able to add my text boxes (4 in a row) but  I want to get my serial numbers onfocus on all the textboxes and not only for 4 text boxes, how can I make onfocus="SerialAutoComplete(this)" for all dynamic text boxes?

A:

Why don't you use a loop to created the cells for each new row. Also, don't you want to add the new row before the button?
The following should add a new row after the last one and provide four columsn with text-input form elements.
Also, you can replace the &nbsp; characters with CSS margins.

// Set the count to the current number of cells OR one.
var cellIndex = document.querySelectorAll('td>input[id^="SERIAL"]').length || 1;
var numOfCols = 4;

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++;
  }
}

function SerialAutoComplete(self) {
  console.log(self);
}
table tr:last-child td:nth-child(2) {
  border: none;
  padding: 8px;
}

.add-users {
  border: none;
  font-size: 14px;
  padding: 8px;
}

#addUsers1 {
  width: 300px;
  font-size: 14px;
}

#popSerialList>B,
#addUsers1 {
  margin-right: 0.25em;
}
<div id="popSerialList" title="Edit Engine Group">
  <B>Group Name:</B> <input type="text" id="GROUPNAME" size="50" />
  <table cellpadding="10" id="createTable">
    <tr>
      <td><input type="text" id="SERIAL1" onfocus="SerialAutoComplete(this)" /></td>
      <td><input type="text" id="SERIAL2" onfocus="SerialAutoComplete(this)" /></td>
      <td><input type="text" id="SERIAL3" onfocus="SerialAutoComplete(this)" /></td>
      <td><input type="text" id="SERIAL4" onfocus="SerialAutoComplete(this)" /></td>
    </tr>
    <tr>
      <td class="add-users">Add Users:</td>
      <td colspan="3">
        <select id="addUsers1" name="addUsers1" multiple="multiple"></select>
        <input type="button" value="Add Row" name="AddRow" id="AddRow" class="button-green engineCancel" onClick="insertRow()" /></td>
    </tr>
  </table>
</div>

