Dynamically add rows in multiple tables in same page using one function

Question

I have multiple tables and I have a function that add rows to these tables:

<table id="table1" style=" border-collapse: collapse;">
<tr id="table1row1">...
<tr id="table1row2">...
<table id="table2" style=" border-collapse: collapse;">
<tr id="table2row1">...
    <tr id="table2row2">...

The problem is that when I add rows instead of giving the result above I will have these kind of results:

<table id="table1" style=" border-collapse: collapse;">
<tr id="table1row1">...
<tr id="table1row2">...
<table id="table2" style=" border-collapse: collapse;">
<tr id="table2row1">...
<tr id="table2row3">...

when I call the function to add a row to a different table it just increment the value

var thischannel=1;
var thisassignment=1;
var thisrow=1;  
function addRow(list,table){

    thisrow++;

    if(something to place in this to point if this is a new table or the same table){
    var thisrow=1;  
    }
}

Answer 1

Instead of keeping row count in a variable, just find out how many rows is there in a table and use that number to create an id

var numRows = $(tableID).find("tr").size();
var id = tableID + "row" + (numRows + 1);

Complete example: http://jsfiddle.net/HK6bA/

Answer 2

I would apply the same class name to all of the tables, and reference them that way in jQuery:

$(".className").append($("<tr><td>Hello World!</td></tr>"));

If you want to use IDs, you can do it this way:

$("#table1, #table2").append("<tr><td>Hello World!</td></tr>"));