jquery focus acting odd, only works first time

Question

I hava a dynamic table with an id='scanTable'. When the below function is called, a new row is added to the table and focus is set on the first element of the new row. It works perfect the for the first row, but every following row, the focus goes to the address bar. The function needs to be triggered by tabbing from the last element in the row.

function addNewRow() {
    elementName = inputType + '_' + rowCounter;
    var newRow = '<tr><td>' + rowCounter + '</td><td><input name="' + elementName + '" type="text" id="' + elementName + '" ></td><td><input type="text" name="serial_' + rowCounter + '" id="serial_' + rowCounter + '" onBlur="serialBlur()"></td></tr>';    
    $('#scanTable tr:last').after(newRow);
    $('#' + elementName).focus();
    //document.getElementById(elementName).focus();
    // for testing, value is being set
    $('#' + elementName).val(elementName); 
    rowCounter++;
}

fiddle

Answer 1

I am unable to assume everything, but for me this following code is working. Where rowCounter and inputType is global variables.

function addNewRow() {
    elementName = inputType + '_' + rowCounter;
    var newRow = '<tr><td>' + rowCounter + '</td><td><input name="' + elementName + '" type="text" id="' + elementName + '" ></td><td><input type="text" name="serial_' + rowCounter + '" id="serial_' + rowCounter + '" onBlur="serialBlur()"></td></tr>';    
    $('#scanTable tr:last').after(newRow);
    $('#' + elementName).focus();
    $('#' + elementName).val(elementName); 
    rowCounter++;
}

See it in Action

In this demo focus is always going to first element of new row.

Answer 2

You have to disable the tab behavior of your serial input

function addNewRow() {
    elementName = inputType + '_' + rowCounter;
    var newRow = '<tr><td>' + rowCounter + '</td><td><input name="' + elementName + '" type="text" id="' + elementName + '" ></td><td><input type="text" name="serial_' + rowCounter + '" id="serial_' + rowCounter + '"></td></tr>';    
    $('#scanTable tr:last').after(newRow);
    $('#serial_' + rowCounter).on('keydown', function(e) {
    if(e.which == 9) { e.preventDefault();addNewRow();}
    });
    $('#' + elementName).focus();
    //document.getElementById(elementName).focus();
    // for testing, value is being set
    $('#' + elementName).val(elementName); 
    rowCounter++;
}

https://jsfiddle.net/99fdtLqt/3/