Untitled

<body>

    <div id="page_container">

        <div class="form_container">

            <h3>Add and Delete rows dynamically with textboxes using jQuery:</h3>

            <table id="expense_table" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>Sl. No</th>
                        <th>Month</th>


                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="reg_no_01" maxlength="10" required /></td>
                        <td><input type="text" name="subjects_01" maxlength="10" required /></td>

                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>

            <input type="button" value="Add Row" id="add_ExpenseRow" />

        </div> <!-- END subject_marks -->
        <div class="clearfix"></div>

    </div>

    <!-- FOOTER -->
    <a class="mm" href="http://mediamilan.com/" title="Go to Media Milan.com" target="_blank"></a>
    <footer> <p>Developed by : Miteshan Patel</p>   </footer>

</body>

jquery

$(function(){
    // GET ID OF last row and increment it by one
    var $lastChar =1, $newRow;
    $get_lastID = function(){
        var $id = $('#expense_table tr:last-child td:first-child input').attr("name");
        $lastChar = parseInt($id.substr($id.length - 2), 10);
        console.log('GET id: ' + $lastChar + ' | $id :'+$id);
        $lastChar = $lastChar + 1;
        $newRow = "<tr>
                    <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td>
                    <td><input type='text' name='subjects_0"+$lastChar+"' maxlength='10' /></td>
                    <td><input type='button' value='Delete' class='del_ExpenseRow' /></td>
                </tr>"
        return $newRow;
    }

    // ***** -- START ADDING NEW ROWS
    $('#add_ExpenseRow').on("click", function(){
        if($lastChar <= 9){
            $get_lastID();
            $('#expense_table tbody').append($newRow);
        } else {
            alert("Reached Maximum Rows!");
        };
    });

    $(".del_ExpenseRow").on("click", function(){
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
    });
});

$(document).on("click", ".del_ExpenseRow", function(){
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
});

$("#expense_table").on("click",'.del_ExpenseRow' function(){
    $(this).closest('tr').remove();
    $lastChar = $lastChar-2;
});