how to avoid selection of duplicate html row to clone using jquery

Question

After a click on a 'td' of table 1, i append some cells from that row to another table (table 2) without moving/changing that row from table 1.

Now to avoid duplication i added class to that 'td' from table 1. Like this

$(".table1 td:first-child + td").click(function(){

  $("#table2").append('<tr><td>clicked TD value from table 1</td>  more td's</tr>');  
  $(this).addClass('done'); 
}):

Now when i tried to remove that appended row from table2...i have to remove the class 'done' which is i added to cliked 'td' of table1.

How to do this?? is there any other way of doing this (avoiding duplication) other than adding class??

Here's the fiddle.

pls help. thanks

Answer 1

Here is a deep revision of your code

Fiddle HERE

$(function () {
    $("#selections tbody").on('click', function (e) {
        var $td = $(e.target);
        if ($td.prevAll('td').length === 1) {
                var $destiny = $('#destiny'),
                                // Any row in destiny that would be a clone of the current clicked td's row
            // You may want to put an id to make sure it is uniq
                $trDestiny = $('tr[rel="' + $td.text() + '"]', $destiny);
                // ...
            if (!$trDestiny.length) {
                // Insert new row ...
            }
            // else {error handling here}
        }
    });
});