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

<divclass="button_pro"><divid='input_1'class="row"><divclass="input-field col s1"><inputclass="sno"type="text"name="Sr_1"value="1"><labelfor="Sr">Sr</label></div><divclass="input-field col s2"><inputid="item_code"type="text"name="item_code_1"value=" "><labelfor="item_code">Item Code</label></div></div></div><divclass="row"><divclass="input-field col s2"><ahref="#"class="btn-floating waves-effect waves-light add "><iclass="mdi-content-add">Add</i></a></div><divclass="input-field col s2"><ahref="#"class="btn-floating waves-effect waves-light remove "><iclass="mdi-content-add">Remove</i></a></div><divclass="input-field col s8"></div><divclass="input-field col s2"><inputtype="text"name="Grand"id="Grand"value=" "><labelfor="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();    
     });

});