Add/Remove Input Fields Dynamically with jQuery

by Ying Chor Ding

HTML

<div class="field-wrapper">
<div class="field-wrapper-inner">
    <div class="left">
        <input type="text" name="field_name[]" value=""/>
    </div>
    <div class="right">
        <input type="text" name="field_name[]" value=""/>
    </div>
    <a href="javascript:void(0);" class="add_button" title="Add field">+</a>
</div>
</div>

CSS

a { text-decoration: none;}
.field-wrapper .left { width: 50%; }
.field-wrapper .right { width: 50%; }

JavaScript

$(document).ready(function(){
    var maxField = 3; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field-wrapper'); //Input field wrapper
    var fieldHTML = '<div class="field-wrapper"><div class="field-wrapper-inner"><div class="left"><input type="text" name="field_name[]" value=""/></div>  <div class="right"><input type="text" name="field_name[]" value=""/></div><a href="javascript:void(0);" class="remove_button" title="Remove field">-</a></div></div>';
    
    
    
    var x = 1; //Initial field counter is 1
    addButton.click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            wrapper.append(fieldHTML); // Add field html
        }
    });
    wrapper.on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});