Get the highest number or the next available number in a list

I'm encountering a problem with assigning the next invoice line value.

I have written a piece of javascript to get the next value but somehow it is missing the next available value and still choosing the highest value.

What I need is the highest or the next available number, LineNo is what I need the highest or next of.

Code

onGridBeforeEditLines: function (e) {//grid 2
    var event123 = e;
    var lineNo = 0;
    var grid = $("#gridLines").data("kendoGrid");
    $(grid.dataSource.data()).each(function (i, v) {
        if (v != null) {
            if (v.LineNo >= lineNo)
                lineNo = v.LineNo; //Getting the highest value    
        }
    });
    lineNo++;
    grid = $("#gridContracts").data("kendoGrid");
    if (e.model.PaymentPeriodID == 0) {           
        var selectedItem = grid.dataItem(grid.select());
        e.model.PaymentPeriodID = selectedItem.ID;
        e.model.LineNo = lineNo; //setting the value to the grid
    }        
},

Images

It seems to work fine for getting the highest number and adding 1 to it. The highest is 3, so 4 is the next available line number.

It doesn't seem to work in when finding the next available number. I have removed line no 2 so 2 should be the next available option but it still gets the highest and adds 1 to it.

Thank you in advance for help.