JSFiddle - React, Tailwind, and code Playground

by jrm2k6

HTML

<ul id="ul1">
<li id="li1">Item 1</li>
<li id="li2">Item 2</li>
</ul>
<a id="link1" href="#">Move all to l2 </a>
        
<ul id="ul2">
<li id="li3">Item3 </li>
</ul>
<a id="link2" href="#">Move all to l1 </a>

<form id="form" action="#" method="POST">
    <input type="submit" name="btSubmit" value="Submit"/>
</form>

CSS

#ul2{
 background-color:red;   
    margin-top: 25px;
}

#link2{
    display:none;
}

JavaScript

var one = $("#ul1");
var two = $("#ul2");
var linkone = $("#link1");
var linktwo = $("#link2");

one.add(two).on("click", "li", function() {
    var target = $.contains(one[0], this) ? two : one;
    var new_input = $('<input/>', {
        'type': 'hidden',
        'name': 'recipients',
        'value': $(this).attr('id'),

    });
    if (target == two) {
        new_input.appendTo('#form');
    } else {
        $('input[value="' + $(this).attr('id') + '"]').remove();
    }
    $(this).appendTo(target).hide().fadeIn();
    linktwo.css('display','inline');
    return false;
});


linkone.add(linktwo).on("click", function() {
    var originList = ($(this).attr('id') == 'link1') ? "#ul1" : "#ul2";
    var destList = (originList == "#ul1") ? "#ul2" : "#ul1";

    $(originList).children().each(function() {
        $(this).appendTo(destList);
        if (originList == "#ul1") {
            var new_input = $('<input/>', {
                'type': 'hidden',
                'name': 'recipients',
                'value': $(this).attr('id'),

            });

            new_input.appendTo('#form').hide().fadeIn();
        } else {
            $('input[value="' + $(this).attr('id') + '"]').remove();
        }
    });
    return false;
});