Moving li from one ul to another jQuery

Question

I am trying to move list items from one unordered list to another. This works fine for the first time, but as soon as the elements move, I cannot move them. I made a violin to illustrate what I'm talking about.

Check here - > jsfiddle

HTML

<table> <tr> <td>Numbers</td> <td>Letters</td> </tr> <tr> <td> <ul class='list1'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </td> <td> <ul class='list2'> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul> </td> </tr> </table> <input type='button' value='<<' id='move_left' /> <input type='button' value='>>' id='move_right' /> 

JQuery

 $('body').on('click', 'li', function() { $(this).toggleClass('selected'); }); $('#move_left').click(function() { $('.list1').append('<li>', $('.list2 .selected').text(), '</li>'); $('.list2 .selected').remove(); }); $('#move_right').click(function() { $('.list2').append('<li>', $('.list1 .selected').text(), '</li>'); $('.list1 .selected').remove(); }); 

CSS

 ul { list-style-type:none; padding:0px; margin:0px; } .selected { background-color:#efefef; } 

As you can see, the elements move from left to right or from right to left, but as soon as they move, I can not move them. Any help is appreciated.

Answer 1

This is easier than you think:

 $('#move_left').click(function() { $('.list1').append($('.list2 .selected').removeClass('selected')); }); $('#move_right').click(function() { $('.list2').append($('.list1 .selected').removeClass('selected')); }); 

http://jsfiddle.net/KjJCa/2/

When you add an existing item to another, it moves there. No need to clone items and manually delete the originals, as you did.

Answer 2

to try:

 $('#move_left').click(function() { $('.list2 .selected').each(function(){ $('.list1').append('<li>'+$(this).text()+'</li>'); }); $('.list2 .selected').remove(); }); $('#move_right').click(function() { $('.list1 .selected').each(function(){ $('.list2').append('<li>'+$(this).text()+'</li>'); }); $('.list1 .selected').remove(); }); 

http://jsfiddle.net/liamallan1/KjJCa/3/