Question

jsFiddle for reference:

http://jsfiddle.net/UxQV7/

What I’m trying to do is if the user clicks on “Add” on the 2nd row, the new form element is displayed underneath.

The user then types a number in that new form element, clicks the “Add” button and then that number will be populated in the Serial# input of the 2nd row and the new form element then is hidden.

The part I’m having trouble is once the user types in the number to that new form element, how do I know to send it back to the 2nd row.

Thanks very much.

Answer 1

You could do:

var index;
$(".addSerial").click(function(){
  index = $(this).closest('tr').index();
  console.log(index);  
   $("#serialAdd").toggle();
});

$("#submitSerial").click(function(){
   $('table tr:eq('+index+') input:first').val($("#serialToAdd").val());
   $("#serialAdd").toggle();
});

fiddle here http://jsfiddle.net/qWGKq/