title: Adding input fields to a HTML form
body: <p>I want to dynamically add form input fields to a form using the javascript below by clicking on the add button:</p>
  
  <pre><code>var i = 0;
  function increment() {
  i += 1;
  }
  
  function addfieldFunction() {
      var r = document.createElement('div');
      var y = document.createElement("INPUT");
      var z = document.createElement("INPUT");
      y.setAttribute("class", "dash-input");
      y.setAttribute("type", "text");
      y.setAttribute("placeholder", "University");
      z.setAttribute("class", "dash-input");
      z.setAttribute("type", "text");
      z.setAttribute("placeholder", "Course");
      increment();
      y.setAttribute("Name", "a_level[ + i ][0]");
      r.appendChild(y);
      z.setAttribute("Name", "a_level[ + i ][1]");
      r.appendChild(z);
      document.getElementById("form-div").appendChild(r);
  }
  
  
  
  &lt;form class = "dash-form" method = "POST" action = "/" &gt;
       &lt;div id = "form-div"&gt;
           &lt;input class = "dash-input" type = "text" name = "a_level[+i][0]" value = "" placeholder = "University"/&gt;
           &lt;input class = "dash-input" type = "text" name = "a_level[+i][1]" value = "" placeholder = "Course"/&gt;
       &lt;/div&gt;
       &lt;div class = "dash-submit"&gt;
          &lt;input class = "dash-submit-button" type = "submit" value = "Submit"/&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;div class = "dash-add"&gt;
      &lt;button class = "dash-add-button" onclick = "addfieldFunction()"&gt;ADD&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The function returns an <strong>i</strong> instead of incrementing and returning an  integer as shown below:</p>
  
  <pre><code>&lt;div id = "form-div"&gt;
      &lt;input class = "dash-input" type = "text" name = "a_level[0][0]" value = "" placeholder = "University"/&gt;
      &lt;input class = "dash-input" type = "text" name = "a_level[0][1]" value = "" placeholder = "Course"/&gt;
  &lt;/div&gt;
  </code></pre>