Перемещение элемента из блока в блок

// выбираем из DOM два родительских элемента, между которыми будем перемещать дочерние 
var setL = document.getElementById('left'), 
    setR = document.getElementById('right');  
// заполнение дочерними элементами, для простоты примера, они будут строчными (это не имеет значения: с блоками принцип тот же) 
for (let el, colorSt, i = 1; i <= 15; i++) { 
  setTimeout(() => { 
    colorSt = `hsl(${Math.floor(Math.random() * 360)}, 100%, 67%)`;  
    setL.insertAdjacentHTML('beforeend', `<span style="background-color: ${colorSt}"></span>`);  
  }, i * 33);  
} 
// добавляем обработчик клика родительским элементам 
setL.addEventListener('click', onSetElemClick); 
setR.addEventListener('click', onSetElemClick); 
 
// обработчик, логика которого крайне проста: если цель (дочерний элемент) не в родителе с которым сравниваем - перемещаем в него 
function onSetElemClick(e) { 
  switch (e.target.parentElement.id) { 
    case 'left' : setR.appendChild(e.target); break;  
    case 'right': setL.appendChild(e.target);  
  } 
}

#container { 
  display: flex;  
  justify-content: space-between;  
} 
 
.set { 
  flex: 0 0 calc(50% - 1.4em); min-height: calc(100vh - 30px);  
  display: inline-flex; flex-wrap: wrap;  
  align-content: flex-start;  
  padding: 0.3em;  
  box-shadow: inset 0 2px 5px 0 #0002;  
  background-color: #eee;  
} 
 
.set span { 
  width: 3em; height: 3em; margin: 0.3em;  
  box-shadow: 0 2px 5px -2px #0004;  
  transition: transform, 0.2s ease-out;  
} 
.set span:hover { transform: scale(1.1); }

<div id="container"> 
  <div id="left" class="set"></div> 
  <div id="right" class="set"></div> 
</div>