row number not update when delete a row in JavaScript

I have a table and I append some rows if it is needed, when I add a row to my table the row number increase like 1, 2, 3, 4, and so on. but if I delete a row for example row number 4, it broke, and if add a new row it not start from number 4 it starts from number 5, how can I solve this problem. this is my js code:-

 $(document).ready(function () {


    var rowcount, addBtn, tableBody;

    addBtn = $('#addNew');
    rowcount = $('#autocomplete_table tbody tr').length + 1;
    tableBody = $('#autocomplete_table');
    addBtn.click(function () {


        $.ajax({
            method: "get",
            url: "book/getDepartment/" ,
            success: function (data) {
            console.log(data)

                //rowcount=rowcount+1;
                console.log(rowcount);
                html = '<tr id="row_' + rowcount + '">';
                html += '<td><button type="button" id="delete_' + rowcount + '"  class=" btn btn-danger btn-sm remove delete_row"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
                html += '<td><input type="text" data-field-name="book_name" name="book_name[]" id="book_name_' + rowcount + '" class=" form-control input-sm "></td>';

                html += '<td><input type="text" data-field-name="edition" name="edition[]" id="edition_' + rowcount + '" class="form-control input-sm "></td>';
                html += '<td><input type="text" required data-field-name="number" name="number[]" id="number_' + rowcount + '" class="form-control input-sm   number"></td>';

                html += '<td><input type="text" data-field-name="by_price" name="by_price[]" id="by_price_' + rowcount + '" class="form-control input-sm  by_price"></td>';
                html += '<td><input type="text" data-field-name="sell_price" name="sell_price[]" id="sell_price_' + rowcount + '" class="form-control input-sm  sell_price"></td>';
                html += '<td><input type="text" data-field-name="total_payment" name="total_payment[]" id="total_payment_' + rowcount + '" class="form-control input-sm  total_payment"></td>';
                html += '<td><select  data-field-name="department" name="department[]" id="department_' + rowcount + '" class=" form-control input-sm department">';
                html += '<option> انتخاب کنید...</option>';
                $.each(data, function (i, item) {
                    html += '<option value="' + item.department_id + '">' + item.department_name + '</option>';

                });
                html += '</select></td>';
                html += '</tr>';
                rowcount++;
                tableBody.append(html);


            },
            error: function () {

            }
        })
    })


    function delete_Row() {


        var rowNo;
        id = $(this).attr('id');
        //console.log(id);
        id_arr = id.split("_");
        // console.log(id_arr);
        rowNo = id_arr[id_arr.length - 1];
        if (rowNo > 1) {
            $('#row_' + rowNo).remove();

        } else {
            alert("شما نمی توانداین سطر را جذف کندید");
        }

        //console.log($(this).parent());
        // $(this).parent().parent().remove();

    }


    function registerEvent() {

        $(document).on('click', '.delete_row', delete_Row);


    }

    registerEvent();


});

Answer

success: function (data) {
     rowcount = $('#autocomplete_table tbody tr').length + 1;

You have declare rowcount At Global scope that’s why its value is equals to total row you add. when you delete any row you are not recounting total rows rowcount = $(‘#autocomplete_table tbody tr’).length + 1; and it start with wrong number.just put your rowcount in side success function