nadiam 0 Posting Pro in Training

I have two tables and two buttons(left button, right button) between those tables. rows in both tables can be selected and when selected can be copied between the two tables. for example in contact-names table there are 3 names: zuki, xavi and pete; guest-list table have no names. zuki and xavi are selected so when right button is clicked those two names get appended into guest-list table. so now that zuki and xavi are in that table say i changed my mind so i select zuki and click on left button and it will prepend zuki into contact-names table. now that zuki is prepended into contact-names table there are 2 names : zuki and pete.

issue is say i selected pete and then i click on right button, pete is appended AS WELL AS zuki but zuki was not selected. so with that glitch i have xavi,zuki and pete listed in guest-list. another thing is if i move xavi to the other table then zuki will follow suit. please help me. tia

contact-names table:

<tbody>
    <table class="contact-names">
        <thead>
            <tr>
                <th>Contacts</th>
            </tr>
        </thead>
        <tbody class="contact-list">

        </tbody>
    </table>
</tbody>

contact-list is populated using jquery .load()

guest-list table :

<tbody>
    <table class="guest-list">
       <thead>
          <tr>
             <th>Guests</th>
           </tr>
        </thead>
        <tbody class="guest-names">

        </tbody>
    </table>
</tbody>

the buttons:

<input type="button" value=">" class="move" id="moveright">
<input type="button" value="<" class="move" id="moveleft">

jquery:

$(".name-row").live('click', function() {
    var row = $(this).css('background','Red');
    $("#moveright").live('click', function(){
        var table = $(".guest-names");
        row.appendTo(table);
        row.css('background', '');
        row.removeClass("name-row");
        row.addClass("row-name");
     });
     $(".row-name").live('click', function(){
         var rows = $(this).css('background', 'Red');
         $("#moveleft").live('click', function(){
           var tables = $(".contact-list");
           rows.prependTo(tables);
           rows.css('background', '');
           rows.removeClass("row-name");
        });
     });
});

".name-row" refers to:

echo 
 "<tr class='name-row'>
    <td><span style='font-size:14px'>$salute $fname $lname</span></td>
  </tr>";