I think the problem is the first row, that's loaded when the page is loaded, gets the jQuery binding but then subsequent rows, added after that pageload event, don't know any better. For minimal edits to your javascript and form, you could do something like this:
$(document).ready(function () {
//Initial binding
RebindRowAction();
//After row is added
$("table").on("change", function () {
RebindRowAction();
});
//Function that actually does the magic of concatenating two fields within the same row
function RebindRowAction(){
$("input[id^=Field7]").on("change", function () {
var x = $(this).parents("tr").find("input[id^=Field12]").val();
var y = $(this).parents("tr").find("input[id^=Field11]").val();
var z = x.concat(y);
$(this).parents("tr").find("input[id^=Field10]").val(z);
});
}
});
Basically, if a row is added, it fires off the $("table").on("change",... function, which rebinds all rows in that table again, making sure the latecomers know what to do too.
The few changes are in the x and y variables, where instead of trying to grab the right row number, it's just grabbing those fields in the row that was edited. Of course, I'm assuming all these fields are in the same row. If that's not the case, we'll need to adjust this example.