Append TR AND change focus to new tr input field

Question

I am creating a form with a table that will be used with a barcode scanner. The table row will start with one row and each time the scanner is used, first a new row would be created and then secondly the focus would drop to a specific input of the newly created row. (basically skipping past the other inputs that existed on the starting row).

I found a similar topic and got this far, but I can't get both creating the new row as well as moving to the new row to work together beyond one extra row. I can use delegation but then that breaks moving focus to the next row's input...

<table id="table1">
 <tr>
   <td><input class="bcode" type="text" name="S1" autofocus/></td>
   <td><input class="b" type="text" name="S2" /></td>
   <td><input class="c" type="text" name="S3" /></td>
 </tr>
</table>

$('#table1').find('.bcode').keypress(function(e){ 
   if ( e.which == 13 ){
    $('<tr><td><input class="bcode" type="text" name="S1" /></td><td><input class="b" type="text" name="S2" /></td><td><input class="c" type="text" name="S3"/></td></tr>').appendTo('#table1');
    $(this).parent().parent().next('tr').find('.bcode').focus();
    return false; 
   } 
});

Fiddle

Answer 1

For events attached to dynamic DOM elements, you should use .on(). Then:

$(document).on("keyup", ".bcode",(function(e){ //code }));

to listen to new created .bcode elements.

You could restrict which .bcode elements with this:

$("#table1").on("keyup", ".bcode",(function(e){ 
 //code
}));

full example here: https://jsfiddle.net/x17r6nf3/3/