[destus]

<style>
        div {
	  display: flex;
	  justify-content: space-between;
	  padding: 30px;
	  background-color: #fff;
	  border: 1px solid #999;
	  cursor: pointer;
	}

	span {
	  width: 100px;
	  height: 100px;
	  background-color: tomato;
	  color: #fff;
	  text-align: center;
	  font-size: 80px;
	  -moz-user-select: none; /* fucking double click :D */
	}
    </style>

    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
<script>
var div = document.querySelector('div');
             div.addEventListener('click', function (e) {
                 var x = e.clientX;
                 var span = document.querySelectorAll('span');
                 var temp = span[0];
                 [].some.call(span, function (elem, i) {
                     if (elem.offsetLeft > x) {
                         return true;
                     }
                     temp = elem;
                 });
                 [].forEach.call(span,function(elem){
                     (elem == temp) ? elem.innerHTML = '+' : elem.innerHTML = '';
                 })
             })
</script>