I am developing a python/django app and I have this form where I have two multiple select boxes. And I want to select an option from the left and move it to the right. I have two only to be more firendly tothe user. The selected options that are being saved are to the left select box. You will see to the following code how, I think it's very simple.

I am using .each, because I somehow loop...but my code, I think, at each click repeats itself and keeps only the last one I have selected. I came to that conclusion after some tests where:

• If I press CTRL and select as many as I want and click the button to "move" them to the "selected", all of the items are being selected after I save the form.
• If I select items by dragging the mouse, the same, all of the items are being selected.

Here is a screenshot. You can see the ids for each element:

And here is my code:

$("#users-to").click(function() { $("#id_users option:selected" ).each(function() { var a = $(this); $('#id_users_to').append(a.clone()); $(this).attr('selected',true); $(this).hide(); $('#update_abtn').attr('disabled',true); $('#delete_abtn').attr('disabled',true); $('#nousers').attr('disabled',true); $("#update_abtn").removeAttr('href'); $("#delete_abtn").removeAttr('href'); }); });

Please help!!!