jQuery moving list items between two select tags

October 7, 2022

I have two select elements on html. The first one has some options/items and when I double click one of the options it will be removed from the first select and appended to the second select. Then if I double click an option on the second select the option will be moved back to the first list.

For example:

<select  multiple="multiple" id="list1">

    <option value="banana">banana</option>
    <option value="orange">orange</option>
    <option value="apricot">apricot</option>
    <option value="lemon">lemon</option>

</select>

<select  multiple="multiple" id="list2">
</select>

jQuery part is as the following

    $(function () {

        $("#list1 option").dblclick(function () {

            $("#list1 option:selected").remove().appendTo("#list2");

        });


        $("#list2 option").dblclick(function () {
            $("#list2 option:selected").remove().appendTo("#list1");

        });

    });

I can move an option in "list1" into "list2" but cannot move back it to "list1" from "list2".

$(function () {

            $("#list1 option").dblclick(function () {

                $("#list1 option:selected").remove().appendTo("#list2");

            });


            $("#list2 option").dblclick(function () {
                $("#list2 option:selected").remove().appendTo("#list1");

            });

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  multiple="multiple" id="list1">
    
        <option value="banana">banana</option>
        <option value="orange">orange</option>
        <option value="apricot">apricot</option>
        <option value="lemon">lemon</option>

    </select>
    
    <select  multiple="multiple" id="list2">
    </select>

>Solution :

To ensure the dblcick event will trigger for dynamicly moved elements, remove the id from the selector and make it a single function that will check which select has been clicked, and will move it to the other

$("option").dblclick(function () {
    const clickedElement = event.target;
    const appendToId = (event.target.parentElement.id === 'list1') ? 'list2' : 'list1';

    clickedElement.remove();
    $(clickedElement).appendTo('#' + appendToId);
});

select { width: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select  multiple="multiple" id="list1">
    <option value="banana">banana</option>
    <option value="orange">orange</option>
    <option value="apricot">apricot</option>
    <option value="lemon">lemon</option>
</select>

<select  multiple="multiple" id="list2">
</select>