Jquery表不显示添加的行

Question

我有一张存储订购纸张信息的表格。用户可以在提交订单之前添加和删除行。在最终发送订单之前，用户可以重新打开他们当前的订单以检查他们输入的所有内容是否正确等等。我遇到的问题是，当用户返回检查他们的订单时，如果选择了多个纸张，则只有显示第一行。有谁知道为什么会这样，以及如何解决它？

JQuery的：

$(document).ready(function () {
    $counter = 1;
    $('#buttonadd').click(function () {
        $counter++;
        $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\
        <td><input type="text" name="product_code_' + $counter + '" id="product_code_' + $counter + '" class="product_code" size="20" maxlength="70" value="" /></td>\
        <td><input type="text" name="description_' + $counter + '" id="description_' + $counter + '" class="description" size="85" maxlength="70" value="" /></td>\
        <td><input type="text" name="priceper_' + $counter + '" id="priceper_' + $counter + '" class="priceper" size="10" maxlength="9" value="" /></td>\
        <td><input type="text" name="per_pack_' + $counter + '" id="per_pack_' + $counter + '" class="per_pack" size="10" maxlength="9" value="" /></td>\
        <td><input type="text" name="pack_qty_' + $counter + '" id="pack_qty_' + $counter + '" class="pack_qty" size="10" maxlength="9" value="" /></td>\
    <td><input type="text" name="quantity_' + $counter + '" id="quantity_' + $counter + '" class="quantity" size="10" maxlength="9" value="" /></td>\
        <td><input type="text" id="subtotal_' + $counter + '" name="quantity_' + $counter + '" class="subtotal" size="10" maxlength="9" /></td></tr>');
    window.globalVar = $counter;

    });
    $('table#invoiceitems').on('keyup', '.quantity , .priceper',function () {
        UpdateTotals(this);
    });

    $counter = 1;
       $('table#invoiceitems').on('click','.buttondelete',function () {
        $counter++;
        if($('table#invoiceitems tbody tr').length==1){
            alert('Cant delete single row');
            return false;
        }
        $(this).closest('tr').remove();
    UpdateTotals(this);

    });
    CalculateSubTotals();
    CalculateTotal();
});


function UpdateTotals(elem) {
    // This will give the tr of the Element Which was changed
    var $container = $(elem).parent().parent();
    var quantity = $container.find('.quantity').val();
    var price = $container.find('.priceper').val();
    var per_pack = $container.find('.per_pack').val();
    var subtotal = parseInt(quantity) * parseFloat(price) / parseInt(per_pack);

    $container.find('.subtotal').val(subtotal.toFixed(2));
    CalculateTotal();
}

function CalculateSubTotals() {
    // Calculate the Subtotals when page loads for the 
    // first time
    var lineTotals = $('.subtotal');
    var quantity = $('.quantity');
    var price = $('.priceper');
    var per_pack = $('.per_pack');
    $.each(lineTotals, function (i) {
        var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).val()) / parseInt($(per_pack[i]).val());
     if (isNaN(val) || val === undefined) {
            return;
        }
        $(lineTotals[i]).val(tot.toFixed(2));
    });
}

function CalculateTotal() {
    // This will Itearate thru the subtotals and
    // claculate the grandTotal and Quantity here
    var lineTotals = $('.subtotal');
    var quantityTotal = $('.quantity');
    var grandTotal = 0.0;
    var totalQuantity = 0;
    $.each(lineTotals, function (i) {
        grandTotal += parseFloat($(lineTotals[i]).val());
        totalQuantity += parseInt($(quantityTotal[i]).val())
    });
    $('.totalquantity').val(totalQuantity);
    $('.total').val(parseFloat(grandTotal).toFixed(2));
}

HTML ：

<table border="0" id="invoiceitems">
                            <thead>
                <tr>
                    <td></td>
                                    <td><strong>Product Code</strong></td>
                    <td><strong>Description</strong></td>
                    <td><strong>Price</strong></td>
                    <td><strong>Per</strong></td>
                    <td><strong>Pack Qty</strong></td>  
                    <td><strong>Quantity</strong></td>
                    <td><strong>Subtotal</strong></td>
                </tr>
            </thead>
            <tfoot>

        </tfoot>
                            <tbody>
            <tr>
            <td><input type="button" class="buttondelete" value="Delete" /></td>
            <td><input type="text" name="product_code_0" id="product_code_0" class="product_code" size="20" maxlength="9" value="<?php echo htmlspecialchars($product_code[0]);?>"/></td>
            <td><input type="text" name="description_0" id="description_0" class="regular-text" size="85" maxlength="70" value="<?php echo htmlspecialchars($description[0]); ?>" /></td>
            <td><input type="text" name="priceper_0" id="priceper_0" class="priceper" size="10" maxlength="9" value="<?php echo htmlspecialchars($priceper[0]); ?>" /></td>
            <td><input type="text" name="per_pack_0" id="per_pack_0" class="per_pack" size="10" maxlength="9" value="<?php echo htmlspecialchars($per_pack[0]); ?>" /></td>
            <td><input type="text" name="pack_qty_0" id="pack_qty_0" class="pack_qty" size="10" maxlength="9" value="<?php echo htmlspecialchars($pack_qty[0]); ?>" /></td> 
            <td><input type="text" name="quantity_0" id="quantity_0" class="quantity" size="10" maxlength="9" value="<?php echo htmlspecialchars($quantity[0]); ?>" /></td>
            <td><input type="text" name="subtotal_0" id="subtotal_0" class="subtotal" size="10" maxlength="9" value="<?php echo htmlspecialchars($subtotal[0]); ?>" /></td></tr>
        </tbody> 
        </table>
        <p><input type="button" id="buttonadd" value="Add Line" /></p>