title: JavaScript Add Textbox Dynamically when Button onClick
body: <p>I am trying to add a new textbox when add button is onclick using JavaScript. Here is my HTML:</p>
  
  <pre><code>htmlStr += "&lt;div id='filterContent' style='width:100%;text-align:center;'&gt;";
  htmlStr += "&lt;input id='startLoc' type='text' /&gt;";
  htmlStr += "&lt;input id='endLoc' type='text' /&gt;";
  htmlStr += "&lt;input id='addLoc' type='button' value='Add' onClick='addTextBox()' /&gt;";
  htmlStr += "&lt;/div&gt;&lt;br/&gt;";
  </code></pre>
  
  <p>And here is my JavaScript to add a new textbox when button is onClick:</p>
  
  <pre><code>function addTextBox(){
  var element = document.createElement("input");
  
  element.setAttribute("type", "text");
  element.setAttribute("value", "");
  element.setAttribute("name", "Test Name");
  //element.setAttribute("style", "width:200px");
  
  var foo = document.getElementById("filterContent");
  foo.appendChild(element);
  }
  </code></pre>
  
  <p>It works perfectly to add as many textbox as I want. But somehow the textbox created share the same id. I wonder is that possible to add many textbox with different ID each time when the button is onClick?</p>
  
  <p>Thanks in advance.</p>