Ramundo,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".bar"), function(el) {
var cell = el.querySelector(".cell");
el.addEventListener("click", function(event) {
var elem = event.target,
cls = elem.classList;
if (cls.contains("cell")) {
elem == cell ? (cell.classList.toggle("selected"), el.classList.toggle("act")) :
(cell.classList.remove("selected"), el.classList.add("act"),
elem.classList.add("selected"), cell = elem);
}
});
});
});
</script>
</head>
<body>
<style type="text/css">
.bar{
border: solid yellow;
display:inline-block;
cursor: pointer;
}
.bar.act .cell {
background-color: SteelBlue;
}
.bar.act .cell.selected ~ .cell{
background-color: PaleTurquoise;
}
.cell{
border: solid blue 2px;
display:inline-block;
width:14px;
height:12px;
background-color: PaleTurquoise;
}
</style>
<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>
<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>
</body>
</html>