assigning unique id and unique name to dynamically created element using global variable

Question

I tried different methods to assign unique names to my dynamically created input fields so that I can access their values in PHP. Came to know that it is possible to declare a global variable in JavaScript that meant that each time I call the addRow() function on a button click, the value of the variable wont be reinitialized and so I can use it as an index to the names or id, but I am not able to make it execute.

var count = 2;

function addRow() {

  var table=document.getElementById("studenttable");
  var row=table.insertRow(-1);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);  

  cell1.innerHTML="<td> <input type='text' **name='nametext+count'" +
    "id='nametext+count'** required  >"; 

  /* also tried..  
  cell1.innerHTML="<td> <input type='text' name='nametext"+count" '" +
    "id='nametext"+count "' required>";
  */

  cell2.innerHTML="<td><div class='dropdown dropdown-dark'>" +
    "<select name='two' class='dropdown-select' >" +
    "<option value=''>Select an option</option><div>" +
    "<option value='1'>Male</option>" +
    "<option value='2'>Female</option></div>" +
    "</option></select></div></td>";

  count++;
}

Answer 1

Your code works for the input (not for the select), but I would advise an overall clearer, less error-prone, different approach. It creates nodes the proper way (using document.createElement()) instead of setting innerHTML - avoiding escaping errors, invalid HTML tags and other common mistakes .

Click here for demo.

var count = 2;

function addRow() {

    var table = document.getElementById("studenttable");
    var row = table.insertRow(-1);

    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    var ipt = document.createElement('input');
    ipt.setAttribute("type", "text");
    ipt.name = "nametext" + count;      // setting unique NAME
    ipt.id = "nametext" + count;        // setting unique ID
    ipt.setAttribute("required", "true");

    cell1.appendChild(ipt);

    var theDiv = document.createElement('div');
    theDiv.setAttribute("class", "dropdown dropdown-dark");
    var theSelect = document.createElement('select');

    theSelect.name = "select"+count;  // setting unique NAME
    theSelect.id = "select"+count;    // setting unique ID

    theSelect.setAttribute("class", "dropdown-select");
    // option "Select an option"
    var opt0 = document.createElement('option');
    opt0.value = "";
    opt0.text = "Select an option";
    theSelect.appendChild(opt0);
    // option "Male"
    var opt1 = document.createElement('option');
    opt1.value = "1";
    opt1.text = "Male";
    theSelect.appendChild(opt1);
    // option "Female"
    var opt2 = document.createElement('option');
    opt2.value = "2";
    opt2.text = "Female";
    theSelect.appendChild(opt2); 

    theDiv.appendChild(theSelect);
    cell2.appendChild(theDiv);

    count++;
}

Answer 2

Change:

cell1.innerHTML="<td> <input type='text' name='nametext+count' id='nametext+count' required  >"; 

To:

cell1.innerHTML="<td> <input type='text' name='" + nametext+count + "' id='" + nametext+count + "' required  >";

String literals are not interpreted in JavaScript.