Unable to find html table column index or header name using jquery

I am trying to find a column index or header name when my cursor is in QTY input field inside html table in any of the row. Please view screenshot below.

In this image my cursor is in Qty column, when I press enter I am not able to get the header name (QTY) or column index.

Following is the code to find index which is not working and always resulted zero. Any help would be appreciated, thanks.

 $('#table-id').on('keypress', function (ev) {
        debugger
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            var index = $(this).closest("td").index;
        }
    });

$('#table-id').on('keypress', function (ev) {
        debugger
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            var index = $(this).closest("td").index;
            var headerName = $('#table-id th').eq(columnIndex).text();

        }
    });

.eq() is a jQuery method that allows you to select a specific element from a collection of elements based on its index. hope this helps