Add/remove row in a table - appendto

Question

I have the following jquery code to add and remove a row in a table. I have multiple tables on one page. Each row in each table has these two classes: .row-add and .row-delete
Now when I click on '.row-add'to add a new row, all the tables are affected, meaning that row is added to all of the tables on the same page. What should I do to make it only apply to its own table when clicked?
Jquery:
$(document).ready(function () {
$('.row-delete').click(function () {
$(this).closest("tr").remove();
});
$('.row-add').click(function () {
$(this).closest("tr").clone(true).appendTo(".table-comparison");
});
});
Html:
<div id="tab-1" class="tab-section">
<div class="container flat rounded-sm bspace">
<table cellspacing="0" class="display table-comparison">
<thead>
<tr>
<th><span>Effective Date</span></th>
<th><span>Price</span></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="effective-date" type="text" value="01/01/2013"> - <input class="effective-date" type="text" value="06/05/2015">
<span class="row-add"></span>
<span class="row-delete"></span>
</td>
<td>
$<input class="price" value="50">
/
<select>
<option>Second</option>
<option>Minute</option>
<option>Hour</option>
<option>Day</option>
<option>Week</option>
<option>Biweek</option>
</select>
/
<select>
<option>Day</option>
<option>Week</option>
<option>Biweek</option>
<option>Month</option>
<option>Quarter</option>
<option>Year</option>
</select>
<span class="row-add"></span>
<span class="row-delete"></span>
</td>
</tr>
<tr class="price-present">
<td><input class="effective-date" type="text" value="07/01/2013"> - <span class="effective-date">Present</span>
<span class="row-add"></span>
<span class="row-delete"></span>
</td>
<td>
$<input class="price" value="40">
/
<select>
<option>Second</option>
<option>Minute</option>
<option>Hour</option>
<option>Day</option>
<option>Week</option>
<option>Biweek</option>
</select>
/
<select>
<option>Day</option>
<option>Week</option>
<option>Biweek</option>
<option>Month</option>
<option>Quarter</option>
<option>Year</option>
</select>
<span class="row-add"></span>
<span class="row-delete"></span>
</td>
</tr>
<tr>
<td><input class="effective-date" type="text" value="01/01/2011"> - <input class="effective-date" type="text" value="06/30/2012">
<span class="row-add"></span>
<span class="row-delete"></span>
</td>
<td>
$<input class="price" value="30">
/
<select>
<option>Second</option>
<option>Minute</option>
<option>Hour</option>
<option>Day</option>
<option>Week</option>
<option>Biweek</option>
</select>
/
<select>
<option>Day</option>
<option>Week</option>
<option>Biweek</option>
<option>Month</option>
<option>Quarter</option>
<option>Year</option>
</select>
<span class="row-add"></span>
<span class="row-delete"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

try to be specific ... closest("tr") you are selecting all trs.
try giving an ID, or class and select that id using jquery.

Answer 2

The problem is that your jQuery selector is on class attribute, if you want to refer to a single table, you have to go by id.
In this case I think the best approach is, if you generate programmatically the html code, to add to every table an auto generated id and to add to every clickable row the following code:
onclick="addrow(table_id)"
where table_id is the autogenerated id of the table. Then:
function addrow(table) {$(table).closest("tr").clone(true).appendTo(".table-comparison");}
Just be warned that also .table-comparison should be avoided switching to id, but I don't know the details of your code!
Hope this helps!
EDIT: still better, if you don't generate code, is the bind function, like
$("p").bind("click", function(event){
This way you can access ex-post who has sent the event.
In your case you I think you could write:
$(".row-delete").bind("click", function (event) {
event.target.closest("tr").remove();
});
$(".row-add").bind("click", function (event) {
event.target.closest("tr").clone(true).appendTo(".table-comparison");
});
Source: JQuery Doc