updating html table row with jquery

updating html table row with jquery

I have a jquery script that returns the number of rows in a table, then
sets that number inside a <td> tag.
<tr>
<td id = "jquery">
</td>
<td>
<%= f.text_field :data1 %>
</td>
<td>
<%= f.text_field :data2 %>
</td>
<td>
<%= f.text_field :data3 %>
</td>
</tr>
<script>
var rowCount = $('#myTable tr').length
$("#jquery").html(rowCount);
</script>
This script works but when I render this view again to add another row to
myTable, it only updates the first row instead of the next row with
rowCount. Any ideas how to fix this?