Updating Table dynamically - Ajax HTML - html

Question

I am trying to update the table as new records come in for table below:
I have got the part where I need to get live information using Ajax. I am using the <tr id = {$university}> as ids to create new rows or update existing. But the updating doesn't seem to work. i.e. If a new student entry is made for University A, than adding a new HTML code. So my existing HTML code looks like
<tr id = "A">
<td>A</td>
<td>Mr. X</td>
<td>a#b.com</td>
</tr>
<tr id = "A">
<td></td>
<td>Mr. Y</td>
<td>e#f.com</td>
</tr>
<tr id = "A">
<td></td>
<td>Mr. S</td>
<td>u#i.com</td>
</tr>
and when I add new data using same <tr id = "A">, it does not append information, but creates a new row:
<tr id = "A">
<td>A</td>
<td>Mr. Z</td>
<td>t#t.com</td>
</tr>
will not append information but create another row in UI. How can I append new information to existing rows?
Added the js code: http://pastebin.com/4tjyUgZa

Answer 1

IDs in HTML are meant to be unique, you shouldn't be duplicating them. Try using a class instead, like <tr class="a">.
I also think you need to revisit your table structure. It looks like what you need are multiple tables, such as table "a" and table "b" that you can then append rows to. The way you are manipulating the table rows just isn't how they're built to work. If you had something like <table id="a"> and <table id="b"> you could then simply target those and add rows easily.
You may also want to make use of a JavaScript framework such as jQuery. It will make manipulating the table much easier and you will be able to write the code much faster.