Q:

How To Get Right SrNo in Add remove Clone With My Calculation

How To Get Right SrNo in Add remove Clone With My Calculation

Click To Add(Multiple Time) After Delete Some Row After Re Click Add To Get SrNo Wrong And I Want With My Calculation...
 <div id="button_pro">
    <div id='input_1' class="row">

    <div class="input-field col s1">
    <input class="sno" type="text" name="Sr_1" value="1" >
    <label for="Sr">Sr</label>
    </div>
    <div class="input-field col s2">
    <input id="item_code" type="text" name="item_code_1" value=" ">
    <label for="item_code">Item Code</label>
    </div>
    <div class="input-field col s2">
    <input id="item_name" type="text" name="item_name_1" value=" ">
    <label for="item_name">Item Name</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="quantity" name="quantity_1"  value=" ">
    <label for="quantity">Quantity</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="net_rate" name="net_rate_1"  value=" ">
    <label for="net_rate">Net Rate</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="tax" name="tax_1" value=" ">
    <label for="tax">tax</label>
    </div>
    <div class="input-field col s1">
    <input type="text"  class="Gross Rate" name="Gross Rate_1" value=" ">
    <label for="Gross Rate">Gross Rate</label>
    </div>
    <div class="input-field col s1">
    <input type="text" class="total" name="total_1" value=" " readonly>
    <label for="total">total</label>
    </div>
    <div class="input-field col s2"> <a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a>

    </div>

    </div>
    </div>
    <div class="row">
    <div class="input-field col s8">
    </div>
    <div class="input-field col s2">
    <input type="text" name="Grand" id="Grand" value=" ">
    <label for="net_rate">Grand Total</label>
    </div>
    </div>

    $('document').ready(function(){
    var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
    $(this).remove();
    txt_box='<div id="input_'+id+'" class="row"><div class="input-field col s1"><input type="text" name="Sr_'+id+'" value="'+id+'" ><label for="SrNo" class="active">SrNo</label></div><div class="input-field col s2"><input id="item_code" type="text" name="item_code_'+id+'"><label for="item_code" class="active">Item Code</label></div><div class="input-field col s2"><input id="item_name" type="text" name="item_name_'+id+'"><label for="item_name" class="active">Item Name</label></div><div class="input-field col s1"><input id="qty" type="text" name="quantity_'+id+'"><label for="quantity" class="active">Quantity</label></div><div class="input-field col s1"><input type="text" name="net_rate_'+id+'" ><label for="net_rate" class="active">Net Rate</label></div><div class="input-field col s1"><input type="text" name="tax_'+id+'" ><label for="tax"class="active">tax</label></div><div class="input-field col s1"><input type="text" name="Gross_Rate_'+id+'"><label for="Gross Rate" class="active">Gross Rate</label></div><div class="input-field col s1"><input type="text" name="total_'+id+'"><label for="total" class="active">total</label></div><div class="input-field col s2"><a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a></div><a href="#" class="btn-floating waves-effect waves-light remove "><i class="mdi-content-clear">Remove</i></a></div>';
    $("#button_pro").append(txt_box);
    id++;
    });

    $('#button_pro').on('click','.remove',function(){
    var parent=$(this).parent().prev().attr("id");
    var parent_im=$(this).parent().attr("id");
    $("#"+parent_im).slideUp('fast',function(){
    $("#"+parent_im).remove();
    if($('.add').length<1){
    $("#"+parent).append('<div class="input-field col s2"> <a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a></div> ');

    }
    });
    });

    });

http://jsfiddle.net/p6jaxvzz/5/ Example For Problem

A:

$('#button_pro').on('click', '.remove', function () {
    var parent = $(this).parent().prev().attr("id");
    var parent_im = $(this).parent().attr("id");
    $("#" + parent_im).slideUp('fast', function () {
        $("#" + parent_im).remove();
        if ($('.add').length < 1) {
            $("#" + parent).append('<div class="input-field col s2"> <a href="#" class="btn-floating waves-effect waves-light add "><i class="mdi-content-add">Add</i></a></div> ');
        }
        var $rows = $('.row');
        $rows.each(function (i) {
            if (i < $rows.length - 1) {
                i++;
                var $inputs = $('input', this);
                $inputs.eq(0).attr('name', 'Sr_' + i).val(i);
                $inputs.eq(1).attr('name', 'item_code_' + i);
                $inputs.eq(2).attr('name', 'item_name_' + i);
                $inputs.eq(3).attr('name', 'quantity_' + i);
                $inputs.eq(4).attr('name', 'net_rate_' + i);
                $inputs.eq(5).attr('name', 'tax_' + i);
                $inputs.eq(6).attr('name', 'Gross_Rate_' + i);
                $inputs.eq(7).attr('name', 'total_' + i);
            }
        });
        id--;
    });
});

Fiddle

