title: Dynamic text boxes generation
body: <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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++;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="popSerialList" title="Edit Engine Group"&gt;
    &lt;B&gt;Group Name:&lt;/B&gt;&amp;nbsp;&amp;nbsp;&lt;input type="text" id="GROUPNAME" size="50" /&gt;
    &lt;table cellpadding="10" id="createTable"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;input type="text" id="SERIAL1" onfocus="SerialAutoComplete(this)" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="SERIAL2" onfocus="SerialAutoComplete(this)" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="SERIAL3" onfocus="SerialAutoComplete(this)" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="SERIAL4" onfocus="SerialAutoComplete(this)" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td style="border:none;font-size:14px; padding:8px;"&gt;Add Users:&lt;/td&gt;
        &lt;td colspan="3" style="border:none; padding:8px;"&gt;&lt;select id="addUsers1" name="addUsers1" style="width:300px;" multiple="multiple" style=font-size:14px;&gt;&lt;/select&gt;&amp;nbsp;&amp;nbsp;&lt;input type="button" value="Add Row" name="AddRow" id="AddRow" class="button-green engineCancel" onClick="insertRow()" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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?</p>