I have a html table that dynamically adds and removes rows with jQuery. The number of rows is limited by jQuery counter which allows a user to add up to 4 rows. My problem is that when a user creates the 4th row they have reached the limit but when they delete a row the limit still remains in place and they can't add any more rows.

http://jsfiddle.net/nallad1985/sqrrt/

HTML

<table id=myTable class=order-list>

<thead>

    <tr>

        <td>Name</td>

        <td>Price</td>

    </tr>

</thead>

<tbody>

    <tr>

        <td>

            <input type=text name=name />

        </td>

        <td>

            <input type=text name=price1 />

        </td>

        <td><a class=deleteRow></a>

        </td>

    </tr>

</tbody>

<tfoot>

    <tr>

        <td colspan=5 style=text-align: left;>

            <input type=button id=addrow value=Add Row />

        </td>

    </tr>

    <tr>

        <td colspan=>Grand Total: $<span id=grandtotal></span>



        </td>

    </tr>

</tfoot>

JQUERY

$(document).ready(function () {

var counter = 0;

$(#addrow).on(click, function () {

    var counter = $('#myTable tr').length - 2;

    var newRow = $(<tr>);

    var cols = ;



    cols += '<td><input type=text name=name' + counter + '/></td>';

    cols += '<td><input type=text name=price' + counter + '/></td>';



    cols += '<td><input type=button id=ibtnDel  value=Delete></td>';

    newRow.append(cols);

    if (counter == 4) $('#addrow').attr('disabled', true).prop('value', You've reached the limit);

    $(table.order-list).append(newRow);

    counter++;

});



$(table.order-list).on(change, 'input[name^=price]', function (event) {

    calculateRow($(this).closest(tr));

    calculateGrandTotal();

});



$(table.order-list).on(click, #ibtnDel, function (event) {

    $(this).closest(tr).remove();

    calculateGrandTotal();

});



});



function calculateRow(row) {

var price = +row.find('input[name^=price]').val();



}



function calculateGrandTotal() {

var grandTotal = 0;

$(table.order-list).find('input[name^=price]').each(function () {

    grandTotal += +$(this).val();

});

$(#grandtotal).text(grandTotal.toFixed(2));

}