add/remove fields dynamically

[markii.borabon_1]

Im trying to dynamically add fields when add button is being press.. my code here works perfectly but.. what I want is when I click any of my fields it must add instantly and dynamically .. here::

$(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="sizes[]"/><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--;
        })

        });

<div class="input_fields_wrap"><button class="add_field_button">Size +</button><div><input type="text" name="sizes[]" required></div>
<div class="input_fields_wrap2"><button class="add_field_button2">Size +</button><div><input type="text" name="colour[]" required></div>
<div class="input_fields_wrap3"><button class="add_field_button3">Size +</button><div><input type="text" name="design[]" required></div>

thnx alot... sir,

[JorgeM]

If you want to be able to fire the event from other elements, you control that by modifying this line...

 var add_button = $(".add_field_button");

Apply the same class to all of your fields and the. Use that class name in this line of code.