JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="leftbox">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

<div class="rightbox">
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box2"></div>
</div>

CSS

.box {
  width: 50px;
  height: 50px;
  background: red;
  margin-bottom: 5px;
}

.leftbox {
  width: 300px;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background: #999;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.rightbox {
  width: 900px;
  height: 600px;
  float: left;
  border: 1px solid #999;
  overflow: scroll;
  padding: 10px;
}

JavaScript

var i = 0;
$(document).ready(function() {
  $(".box").click(function() {
    i++;
    $(this).appendTo('.box2:nth-child(' + i + ')');
  });
});