Create Form dropdown list with input amount value

I ask for help or suggestions for the form I made: Template Design:

I want to create a form where the item list can select the available items in the drop down and then give it the amount used. then there is an add button to add another item. i am confused how to make html form and javascript / ajax for this design

Answer

You can replicate the components and remove components by using JavaScript’s onclick event and Nodes.

var counter = 0;

document.getElementById('moreFields').onclick = moreFields;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

<div id="readroot" style="display: none">

    <input type="button" value="x"
        onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

    <input name="amount" value="title" />

    <select name="items">
        <option>Items</option>
        <option value="cable">Cable</option>
        <option value="rj45">rRJ45</option>
    </select>
  
  <select name="type">
        <option>type</option>
        <option value="m">Cable</option>
        <option value="pcs">pcs</option>
    </select>

</div>

<form method="post" action="/cgi-bin/show_params.cgi">

    <span id="writeroot"></span>

    <input type="button" id="moreFields" value="Add more" />

</form>

When you click the “Add more” button, it will trigger the moreFields(). Inside that function, it keeps a count of the rows that currently created by using the counter variable. Then it creates a copy of the elements inside the element ID: readroot and append it to the element Section with ID: writeroot.

When you click the button with “x” value, it will trigger a removeChild() function and removes the row connected to the “x” button.

References: Click Here