JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div id="display"></div>
<button> переместить верхний</button>
<div id="keep">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    
</div>

CSS

.red {
    background: red;
}

JavaScript

jQuery(function($) {
    var $keep=$('#keep'),$display=$('#display');
    $('#keep,#display').on('click','>div',function(){ 
        $this=$(this);
        if ($this.parent().is($display)) {
            $this.appendTo($keep);
            return;
        }
        $display.children().first().appendTo($keep);
        $display.html($this); //так тоже работает
        
    });
    $('#keep>div').click(function() { //пруф что все обработчики остаются работает в обоих блоках
        $(this).toggleClass('red');
    });
    $('button').click(function() {
        $display.children().first().appendTo($keep);        
        $keep.children().first().appendTo('#display');
    });
});