Пардон
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.bar{
border: solid yellow;
display:inline-block;
cursor: pointer;
}
.cell{
border: solid blue 2px;
display:inline-block;
width:14px;
height:12px;
background: PaleTurquoise;
}
.selected {
background: SteelBlue;
}
</style>
</head>
<body>
<div class = "bar">
<div class = "cell " data-val = "1"></div>
<div class = "cell" data-val = "2"></div>
<div class = "cell" data-val = "3"></div>
<div class = "cell" data-val = "4"></div>
<div class = "cell" data-val = "5"></div>
<div class = "cell" data-val = "6"></div>
</div>
<script>
var cell = document.querySelectorAll('.cell'), n = 0;
cell.forEach(function(el, s){
el.onclick = function(e) {
cell.forEach(function(el, i) {
if(i<s) el.classList.add('selected');
if(i>s) el.classList.remove('selected');
if(i==s && n==s|| i==s && !el.matches('.selected')) el.classList.toggle('selected');
});
n=s;
};
});
</script>
</body>
</html>