title: HTML Javascript dynamically add and remove textboxes
body: <p>I'm trying to add and remove text boxes dynamically using javascript and HTML.
  I can get it to add and remove but sometimes the remove button doesn't work. when I inspect the element it says that there is no onclick value for the remove button. I don't understand why when I set the onclick in the add function.</p>
  
  <p>Heres my code:</p>
  
  <pre><code>&lt;div  id="reqs"&gt;
  &lt;h3 align = "center"&gt; Requirements &lt;/h3&gt;
  &lt;script&gt;
      var reqs_id = 0;
      function removeElement(elementId,elementId2) {
          // Removes an element from the document
          var element2 = document.getElementById(elementId2);
          var element = document.getElementById(elementId);
          element2.parentNode.removeChild(element2);
          element.parentNode.removeChild(element);
  
      }   
      function add() {
          reqs_id++;// increment reqs_id to get a unique ID for the new element
  
          //create textbox
          var input = document.createElement('input');
          input.type = "text";
          input.setAttribute("class","w3-input w3-border");
          input.setAttribute('id','reqs'+reqs_id);
          var reqs = document.getElementById("reqs");
          //create remove button
          var remove = document.createElement('button');
          remove.setAttribute('id','reqsr'+reqs_id);
          remove.onclick = function() {removeElement('reqs'+reqs_id,'reqsr'+reqs_id);return false;};
          remove.setAttribute("type","button");
          remove.innerHTML = "Remove";
          //append elements
          reqs.appendChild(input);
          reqs.appendChild(remove);
      }
  
  &lt;/script&gt;
  &lt;button type="button" value="Add" onclick="javascript:add();"&gt; Add&lt;/button&gt; 
  </code></pre>
  
  <p></p>