I'm trying to move list items from one un-ordered list to another. This works fine the first time but once the items are moved I am unable to move them back. I made a fiddle to illustrate what i'm talking about.

Check it out 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 items move from left to right or right to left, yet once they are moved i am unable to move them back. Any help is appreciated.