JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section1">
    <div id="1" >1</div>
    <div id="2" >2</div>
    <div id="3" >3</div>
    <div id="4" >4</div>
    <div id="5" >5</div>
    <div id="6" >6</div>
    <div id="7" >7</div>
    <div id="8" >8</div>
</div>

<div class="section2"></div>

CSS

.section1 div{height:25px; background-color:#333; color:#FFF; border:1px solid red; margin-bottom:2px; width:50px;}

.section2 div{height:25px; background-color:red; color:yellow; border:1px solid green; margin-bottom:2px; width:150px;}

.section1{float:left; margin-right:50px;}
.section2{float:left}

JavaScript

$(document).ready(function() {
    function testclick() {
        var iLoc = $(this).attr("id");
        $('.section2').append(this);
        $('#'+iLoc).unbind('click', testclick);
    }

    function testclick2() {
        alert("s");
        var iLoc = $(this).attr("id");
        $('.section1').append(this);
        this.unbind('click', testclick2);
    }
    $('.section1 div').bind('click', testclick);
    $('.section2 div').bind('click', testclick2);


});