JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div>
    <ul id="list1">
        <li>item1-1</li>
        <li>item1-2</li>
        <li>item1-3</li>
    </ul>
    
    <ul id="list2">
        <li>item2-1</li>
        <li>item2-2</li>
        <li>item2-3</li>
    </ul>
    
</div>

CSS

ul{
    background:red;
    padding:10px;
    display:inline-block;
}

li{
    background:grey;
    padding10px;
    width:100px;
    margin-bottom:10px;
}

JavaScript

$(function() {

    $("#list1").on('dblclick','li',function() {
        $(this).appendTo('#list2');
    });

    $("#list2").on('dblclick','li',function() {
        $(this).appendTo('#list1');
    });

});