title: how to assign unique id to elements that are created dynamically - Javascript
body: <p>Hello im trying to generate dynamic divs with a textbox and delete button in it. On form submit i want all dynamically generated textboxes values, how can i assign unique id to the textbox element. The ID's / Name of textbox should be unique.. to get all values properly.
  Pls suggest.. </p>
  
  <p>My Code: </p>
  
  <pre><code>&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt; Add/Remove dynamic elements&lt;/TITLE&gt;
  &lt;SCRIPT language="javascript"&gt;
      function addRow(divId) {
          count = 0;
          count++;
  
          var parentDiv = document.getElementById(divId);
  
          // create a div dynamically
          var eleDiv = document.createElement("div");
          eleDiv.setAttribute("name", "olddiv");
          eleDiv.setAttribute("id", "olddiv");
  
           // create a textbox dynamically
          var eleText = document.createElement("input");
          eleText.setAttribute("type", "text");
          eleText.setAttribute("name", 'textbox' + count);
          eleText.setAttribute("id", "textbox");
  
          // create a delete button dynamically
          var eleBtn = document.createElement("input");
          eleBtn.setAttribute("type", "button");
          eleBtn.setAttribute("value", "delete");
          eleBtn.setAttribute("name", "button");
          eleBtn.setAttribute("id", "button");
          eleBtn.setAttribute("onclick", "deleteRow('button')");
  
          // append new div to parent div 
          parentDiv.appendChild(eleDiv);
  
          // append textbox &amp; button to new div 
          eleDiv.appendChild(eleText);
          eleDiv.appendChild(eleBtn);
  
      }
  
      function deleteRow(tableID) {
              var div = document.getElementById('olddiv');
              if (div) {
                  div.parentNode.removeChild(div);
              }
      }
  
  &lt;/SCRIPT&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;form name="objForm" action="test1.php"&gt;
      &lt;INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /&gt;
      &lt;div id="dataTable" width="350px"&gt;&lt;INPUT type="text" name="txtData" /&gt;&lt;/div&gt;
      &lt;input  type="submit" value="Submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>