JSFiddle - React, Tailwind, and code Playground

by twimB

HTML

<section class='container-A'>
    <div class='elem'>
        A
    </div>
        <div class='elem'>
        A
    </div>
</section>

<section class='container-B'>
    <div class='elem'>
        B
    </div>
        <div class='elem'>
        B
    </div>
</section>

CSS

.container-A{
    width:100px;
    height:210px;
    background:pink;
}
.container-B{
    width:100px;
    height:210px;
    background:purple;
}
.elem{
    width:50px;
    height:50px;
    border:1px solid red;
}

JavaScript

$(document).on('click', 'section.container-A div.elem', function() {
        $('section.container-B').append(this) ;
 }) ;
 $(document).on('click', 'section.container-B div.elem', function() {
        $('section.container-A').append(this) ;
 }) ;