add remove

by Akram kamal

HTML

<button class="add_field_button">Add</button>
<div class="input_fields_wrap"></div>

JavaScript

$(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 prefix1 = 'anything';
var prefix2 = 'anything_else';


$add_button.click(function(e){ //on add input button click
    var count = $wrapper.find('.col-xs-12').length;
    e.preventDefault();
    if(count < max_fields){ //max input box allowed
        $wrapper.append('<div class="col-xs-12"><div class="row">\
        <div class="col-xs-9"><div class="form-group"><label>Postage Description:</label>\
<input type="text" class="form-control" name="'+prefix1+'_'+count+'"  id="'+prefix1+'_'+count+'" value="My ID is :'+prefix1+'_'+count+'"/></div><!-- form-group --></div>\
        <!-- col-xs-9 --><div class="col-xs-2"><div class="form-group"><label>Postage Price:</label>\
        <input type="text" class="form-control" name="'+prefix2+'_'+count+'"  id="'+prefix2+'_'+count+'"  value="My ID is :'+prefix2+'_'+count+'"/></div><!-- form-group --></div>\
        <!-- col-xs-2 --><div class="remove_field"><span class="glyphicon glyphicon-remove">Remove</span><div></div>\
        <!-- row --></div><!-- col-xs-12 -->'); //add input box
    }
    });
$wrapper.on("click",".remove_field", function(e){ //user click on remove text
    $(this).parents('.col-xs-12').remove(); 
    $wrapper.find('.col-xs-12').each(function(i){
        $(this).find('input[type="text"]:first').attr({"id": prefix1+'_'+i, "name":prefix1+'_'+i}).val("My ID is: "+prefix1+"_"+i);
        $(this).find('input[type="text"]:last').attr({"id": prefix2+'_'+i, "name":prefix2+'_'+i}).val("My ID is: "+prefix2+"_"+i);
    });
});
});