<div id="container">
  <div class="group">
    <div class="item"></div><div class="item"></div>
    <div class="item"></div><div class="item"></div>
    <div class="item"></div><div class="item"></div>
    <div class="item"></div><div class="item"></div>
    <div class="item"></div><div class="item"></div>
    <div class="item"></div><div class="item"></div>
  </div>
  <div class="group"></div>
</div>

#container {
  display: flex;
  width: 100%;
}
.group {
  border: 1px solid #333;
  min-height: 50vh;
  width: 40vw;
  margin: auto;
  display: flex;
}
.item {
  width: 2vw;
  height: 2vw;
  background-color: #CCC;
  border: 1px solid #333;
  margin: auto;
  flex-wrap: wrap;
}

let dest = 0;
const groups = document.querySelectorAll('.group');
const items = document.querySelectorAll('.item');

document.addEventListener('click', () => {
  const target = groups[(++dest) % groups.length];
  items.forEach(item => target.appendChild(item));
});