<div id="parent">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column">
    <div class="circle"></div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>

.column {
  border: 1px solid red;
  width: 100px;
  height: 50px;
  margin-left: 5px;
  float: left;
}
.circle {
  background: blue;
  width: 100px;
  height: 50px;
}
 .red {
  background: red;
}
 .green {
  background: green;
}

var parent = document.getElementById("parent").children;

const Direction = Object.freeze({
    LEFT: 'left',
    RIGHT: 'right'
});

function move(direction) {
    for (var i = 0; i < parent.length; i++) {
        var children = parent[i];
        if (children.children.length > 0) {
            var circle = document.createElement("div");
            if (direction == Direction.LEFT) {
                var moveLeftIndex = --i;
                if (moveLeftIndex >= 0) {
                    circle.className = "circle green";
                    children.textContent = '';
                    parent[moveLeftIndex].appendChild(circle);
                }
            } else if (direction == Direction.RIGHT) {
                var moveRightIndex = ++i;
                if (moveRightIndex < parent.length) {
                    circle.className = "circle red";
                    children.textContent = '';
                    parent[moveRightIndex].appendChild(circle);
                }
            }
            break;
        }
    }
}


document.onkeydown = function(e) {
    if (e.keyCode == '37') {
        move(Direction.LEFT);
    } else if (e.keyCode == '39') {
        move(Direction.RIGHT);
    }
}