[destus]

Если долго не думать

<div id='box'>
  <div id='e1' class='el'>1</div>
  <div class='el'>2</div>
  <div class='el'>3</div>
  <div class='el'>4</div>
  <div class='el'>5</div>
  <div class='el'>6</div>
  <div class='el'>7</div>
  <div class='el'>8</div>
  <div class='el'>9</div>
  <div class='el'>X</div>
</div>
<style>
  body {
    display: flex;
    margin: 0;
    height: 100vh;
    background: #56bddc;
  }
  #box {
    display: flex;
    margin: auto;
    box-shadow: 0 0 5px hsla(0, 0%, 0%, .25);
  }
  .el {
    width: 60px;
    line-height: 60px;
    font-family: consolas;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  .el:hover { background: #fece9a; }
  .mark { background: #fece9a; }
</style>

<script>
	
	function positionChild(node)
	{
		var pos = 1;
		for (var x = node.parentNode.firstChild; x != null; x = x.nextSibling, pos++  )
		{
			if ( x.id == node.id && x.nodeType == 1 ) { return pos; break; }	
		}
	}
	
	function addClassName(obj,name)
	{
		obj.className += name; 	
	}
	
	function byPass(startDiv,endDiv)
	{
		for ( var x = startDiv; x != endDiv.nextSibling  ;  x = x.nextSibling )
		{
			addClassName(x,' mark');
		}		
	}
	
	
	var start, end;
	document.getElementById('box').onclick=function fn(e){
		e = e || event;
		var target = e.target;
		if (!start) { start = true; target.id = 'start'; } 
		else
		{
			var startChildPosition, endChildPosition;
			if (!end) 
			{ 
				end = true;
				if (target.id == 'start')
				{
					addClassName(target, ' mark');
				}
				else
				{ 
					target.id = 'end';
				}
			} 
			startDiv = document.getElementById('start');
			endDiv = document.getElementById('end');
			startChildPosition = positionChild(startDiv);
			endChildPosition = positionChild(endDiv);
			if (startChildPosition < endChildPosition) byPass(startDiv,endDiv);
			else byPass(endDiv,startDiv)
		}
	}

</script>