add-remove-input-fields-dynamically-with-jquery

                       If you are looking to add and remove duplicate input fields, here’s jQuery example below to do the task for you. This jQuery snippet adds duplicate input fields dynamically.

JQUERY FILE

$(document).ready(function() {

    var max_fields      = 10; //maximum input boxes allowed

    var wrapper         = $(".input_fields_wrap"); //Fields wrapper

    var add_button      = $(".add_field_button"); //Add button ID

   

    var x = 1; //initlal text box count

    $(add_button).click(function(e){ //on add input button click

        e.preventDefault();

        if(x < max_fields){ //max input box allowed

            x++; //text box increment

            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box

        }

    });

   

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text

        e.preventDefault(); $(this).parent('div').remove(); x--;

    })

});

 HTML FILE

<div class="input_fields_wrap">

    <button class="add_field_button">Add More Fields</button>

    <div><input type="text" name="mytext[]"></div>

</div>

 If you read comment lines carefully, the process is pretty straight forward. We start with 1 input field and let user add more fields until the count reaches maximum. Same process goes to delete button, when clicked, it removes current text field by removing the parent element, which is div element.