How do i change the content of table cells using jquery and then dynamically add more when I run out?

How do i change the content of table cells using jquery and then
dynamically add more when I run out?

I have a table with three columns. I create a string in php that separates
"id" and corresponding data by commas. those pairs are seperated by
exclamation points so that I can use them in this way. I want to fill each
table cell with data and assign it an id so that I can use the ID later
for a mysql query if that object is clicked. when I have filled the row
and need more columns I want to add another row. when the array containing
the id-data pairs is empty I want to break the loop. I have no idea what
I'm doing so please be detailed. After days of research this is what I
could gather and it is not even close to producing results.
$("#class").keyup(function ()
{
$.post("classSearch.php",
{
class:$(this).serialize(),
},
function(data)
{
if (data == "notFound")
{
$("#searchResults td").siblings(":first").text("No Results");
}
else
{
var counter = 0;
var resultsTemp= data.split("!");
var iterations = resultsTemp.size();
$("#searchResults td:first").each(function()
{
if (counter == iterations)
{return false;}
if((counter % 3) == 0)
{$("#searchResults
td").siblings(":last").append("<tr><td></td><td></td><td></td></tr>");}
var results = resultsTemp.split(",");
$(this).text(results[(1)]);
$(this).attr("id",results[0]);
counter ++;
});
}
});
});
HTML
<table id="searchResults">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>