JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
    </head>
    <body>
        <div id="sent_area" class="area">
            <p class="A1">
                <input type="checkbox" name="prod" value="A1" /> <span>A1</span>
            </p>
            <p class="A2">
                <input type="checkbox" name="prod" value="A2" /> <span>A2</span>
            </p>
            <p class="A3">
                <input type="checkbox" name="prod" value="A3" /> <span>A3</span>
            </p>
            <p class="A4">
                <input type="checkbox" name="prod" value="A4" /> <span>A4</span>
            </p>
            <div id="prodList"></div>
            <button id="sent">>></button>
        </div>
        <div class="area" style="border-style: none; width:50px;">
        </div>
        
        <div id="receive_area" class="area">
            
            <div id="cartList"></div>
            <button id="back"><<</button>
                </div>        
                </body>
                </html>

CSS

.area{
    border-style: solid; 
    padding: 5px; 
    width:100px; 
    height:200px; 
    float:left;
}

JavaScript

$("#sent").click(function() {
    $('div#sent_area p input:checkbox:checked').each(function(index) {
        // $("#cartList").append("<p class=" + $(this).val() + "-1>" + "<input type='text' value='" + $('.' + $(this).val() + ' span').html() + "' /></p>");
           $("#cartList").append("<p class=" + $(this).val() + "-1>" + $('.' + $(this).val()).html() + '</p>');
        $("." + $(this).val()).remove();
    });
});

$("#back").click(function() {
    $('div#receive_area p input:checkbox:checked').each(function(index) {
        $("#prodList").append("<p class='" + $(this).val() + "'>" + $('.' + $(this).val() + '-1').html() + '</p>');
        $("." + $(this).val() + "-1").remove();
    });
})