title: dynamically adding html form elements and updated data gets reset
body: <p>So the below code dynamically adds html form elements using javascript.
  The problem is that if I add new html form elements, then update it with what I want (i.e. type in abc) and then click on add another it wipes what I'd previously typed in and resets it back to its original text.</p>
  
  <p>For example:</p>
  
  <p>Click on "Add more data"</p>
  
  <p>I then change "First Name" to John, "Last name" to Doe.</p>
  
  <p>I then click on "Add more data" again and John has been reset to "First name" and Doe has been reset to "Last name".</p>
  
  <p>How do I fix this?</p>
  
  <pre><code>&lt;script&gt;
  var x = 1;
  
  function add() {
  var fooId = "foo";
  
  for (i=1; i&lt;=3; i++)
  {
  //Create an input type dynamically.
  var element = document.createElement("input");
  
  //Assign different attributes to the element.
  element.setAttribute("type", fooId+x+i);
  element.setAttribute("name", fooId+x+i);
  element.setAttribute("id", fooId+x+i);
  
  if(i==1){
         element.setAttribute("value", "First name");
   }
  if(i==2){
        element.setAttribute("value", "Last name");
  
  }
  if(i==3){
      element.setAttribute("value", "age");
  
  }          
  var foo = document.getElementById("fooBar");
  foo.appendChild(element);
  foo.innerHTML += ' ';
  
  }
      i++;            
  var br = document.createElement("br");
  foo.appendChild(br);
  
  x++;
  
  }
  &lt;/SCRIPT&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  
  &lt;form id="form" name="form" action="test.php" method="post" enctype="multipart/form-data"&gt;
  
  &lt;input type="text" id="foo01" name="foo01" value="first name"&gt; 
  
  &lt;input type="text" id="foo02" name="foo02" value="last name"/&gt;  
  &lt;input type="text" id="foo03" name="foo03" value="age"&gt; 
  &lt;br&gt;
  &lt;span id="fooBar"&gt;&lt;/span&gt;
  
  &lt;FORM&gt;
  
  &lt;INPUT type="button" value="Add more data" onclick="add()"/&gt;
  &lt;input type="submit" value="Submit"&gt;
  &lt;/center&gt;
  &lt;/FORM&gt;
  
  &lt;/form&gt;
  
  &lt;/body&gt;
  </code></pre>