move listbox items using jquery

hi all,

let we assume i have listbox A and B, then 2 buttons called Left and Right. my req. is if i click Right then move the item from A to B, so, that i used this code

$("#fromListBox option:selected").appendTo("#toListBox");

if the user selects ALL from A then i have to move all data from A to B, for that i used this code

$("#fromListBox option").appendTo("#toListBox");

the real problem is, the data was move from A to B but the data was actually removed from A and added to B. But, i want to keep the data on A as well as B. so, experts please advise me how to resolve this issue.

Re: move listbox items using jquery

Try this

$("#fromListBox option:selected").clone().appendTo("#toListBox");

Example:

<div>
    <h3>List A</h3>
    <select id="list1" multiple="multiple" rows=2>
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Option 3</option>
        <option value=4>Option 4</option>
        <option value=5>Option 5</option>
        <option value=6>Option 6</option>
    </select>
    <br/>
    <input id="button1" type="button" value="Move to List B" />
</div>
<div>
    <h3>List A</h3>
    <select id="list2" multiple="multiple" rows=2>
        
    </select>
</div>

$(function(){
    $("#button1").click(function(){
        $("#list1 > option:selected").each(function(){
            $('#list1 option:selected').clone().appendTo("#list2");
        });
    });
});