"html javascript dynamically add and remove textboxes" Code Answer

this will work:

<div id="reqs">
  <h3 align="center"> requirements </h3>
</div>
<script>
  var reqs_id = 0;

  function removeelement(ev) {
    var button = ev.target;
    var field = button.previoussibling;
    var div = button.parentelement;
    div.removechild(button);
    div.removechild(field);
  }

  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);
    input.setattribute('value', reqs_id);
    var reqs = document.getelementbyid("reqs");
    //create remove button
    var remove = document.createelement('button');
    remove.setattribute('id', 'reqsr' + reqs_id);
    remove.onclick = function(e) {
      removeelement(e)
    };
    remove.setattribute("type", "button");
    remove.innerhtml = "remove" + reqs_id;
    //append elements
    reqs.appendchild(input);
    reqs.appendchild(remove);
  }

</script>
<button type="button" value="add" onclick="javascript:add();"> add</button>

By IBs on July 23 2022