JSFiddle - React, Tailwind, and code Playground

by Andrey7287

HTML

<div class="main_block"  id="up">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>
<div class="secondary_block" id="down">
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

CSS

.main_block,
.secondary_block {
	width: 400px;
	height: 50px;
	overflow: hidden;
	clear: both;
}

.main_block div,
.secondary_block div {
	width: 100px;
	height: 50px;
	text-align: center;
	float: left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
  padding-top: 17px;
  color: #fff;
}

.main_block div {
	background: green;
}
.secondary_block div {
	background: blue;
}

JavaScript

var upBlock = document.getElementById('up');
var downBlock = document.getElementById('down');
var cnt;

function getRandomElementChild(element){
  
  var childCount = element.children.length;
  var random = Math.round(-0.5 + Math.random() * (childCount));
  return [
		  element.children[random],
		  Array.prototype.indexOf.call(element.children, element.children[random])
		 ];

};

function changeElement(a, b){
	
	var randomFromA = getRandomElementChild(a);
	if(randomFromA[1] === cnt) {
		randomFromA[1] < 2 ? randomFromA[1] = ++randomFromA[1] : randomFromA[1] = --randomFromA[1];
	}
	cnt = randomFromA[1];
	var randomFromB = getRandomElementChild(b);
	a.insertBefore(randomFromB[0], a.children[randomFromA[1]]);
	b.insertBefore(randomFromA[0], b.children[randomFromB[1]]);
};

setInterval(changeElement.bind(null, upBlock, downBlock), 2000);