title: Unable to generate Unique IDs and access them in document.getElementById()
body: <pre><code>function printPerson(nop) {
      if (nop == null || nop == 0) {
          document.getElementById("div1").innerHTML = "";
      }
      else {
          for (var i = 0; i &lt; nop; i++) {
              var element = document.createElement("input");
              var label = document.createElement("Label");
              var button1 = document.createElement("input");
              var button2 = document.createElement("input");
              var br = document.createElement("br");
              label.innerHTML = "User Name :";
              // addition text box
              element.setAttribute("type", "text");
              element.setAttribute("name", "addition");
              element.setAttribute("id", "cal");
              // button 1
              button1.setAttribute("type", "button");
              button1.setAttribute("value", "+");
              button1.setAttribute("onclick", "document.getElementById('cal').value += '+' ");
              // button 2
              button2.setAttribute("type", "button");
              button2.setAttribute("value", "=");
              button2.setAttribute("onclick", "document.getElementById('cal').value = eval(document.getElementById('cal').value)");
              var para = document.getElementById("div1");
              para.appendChild(label);
              para.appendChild(element);
              para.appendChild(br);
              para.appendChild(button1);
              para.appendChild(button2);
              para.appendChild(br);
              count++;
          }
      }
  }
  </code></pre>
  
  <p>Here I am trying to create text boxes and buttons based on the user input but I was not able to give unique IDs for each and every dynamically generated fields so the actions are being performed only one first created text box</p>