JSFiddle - React, Tailwind, and code Playground

by nel_mo

HTML

<ul id="selection">
        <li><span>Apple</span></li>
        <li><span>Pear</span></li>
        <li><span>Banana</span></li>
        <li><span>Melon</span></li>
    </ul>
    
    
    
    <ul id="selected">
        <li><span>Mango</span></li>
    </ul>

CSS

#selection, #selected{
    float:left;
    margin:20px;
    padding:20px;
    border:1px solid #888;
    height:200px;
    width:200px;
}

#selection, #selected{
    list-style-type: none;
}

JavaScript

// Copy over on double click and 
// Delete on double click on selected side
    $('#selection').on('dblclick', 'li', function() {
        $('#selected').append($(this).clone());
    });


    $('#selected').on('dblclick', 'li', function() {
        $(this).remove();
    });



// Move over and back on double click on each side
    $('#selection').on('dblclick', 'li', function() {
        $('#selected').append($(this).clone());
        $(this).remove();
    });


    $('#selected').on('dblclick', 'li', function() {
        $('#selection').append($(this).clone());
        $(this).remove();
    });