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 Calculatio

Solution 1:

$('#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

Solution 2:

This will surely help you. I have moddifed your sequence of elements in HTML too, but they are fine don't worry about that.

Here just showing you only for two fields, you add rest in var clone

JSFiddle

HTML

<div class="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>
</div>
<div class="row">
    <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 class="input-field col s2"> 
        <a href="#" class="btn-floating waves-effect waves-light remove ">
            <i class="mdi-content-add">Remove</i>
        </a> 
    </div>
    <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>

JavaScript/JQuery

    $(".remove").hide();
$(function () {
    $(".add").click(function () {
        num = $(".button_pro").length;
        //alert(num);
        if(num>=1)
        {
            $(".remove").show();
        }
        incr = num + 1;
        var clone = '<div class="button_pro">';
        clone += '<div id="input_' + incr + '" class="row">';
        clone += '<div class="input-field col s1">';
        clone += '<input class="sno" type="text" name="Sr_' + incr + '" value="' + incr + '">';
        clone += '<label for="Sr">Sr</label>';
        clone += '</div>';
        clone += '<div class="input-field col s2">';
        clone += '<input id="item_code" type="text" name="item_code_' + incr + '" value=" ">'
        clone += '<label for="item_code">Item Code</label>'
        clone += '</div>';
        clone += '</div>'; 
        clone += '</div>';
        $(clone).insertBefore($(this).closest('.row'));
    }); 

     $(".remove").click(function () {
     lastnum = $(".button_pro").length;
     if(lastnum == 2)
     {
        $(".remove").hide();
     }
     $(".button_pro:nth-child(" + lastnum + ")").remove();    
     });

});