Lemme,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<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>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var b = document.querySelector("div"),
d = b.querySelectorAll("span"),
c;
b.addEventListener("click", function(b) {
c = [].map.call(d, function(a) {
var e = a.getBoundingClientRect(),
c = e.left + a.offsetWidth / 2 - b.clientX;
a = e.top + a.offsetHeight / 2 - b.clientY;
return Math.sqrt(c * c + a * a)
});
var f = Math.min.apply(null, c);
[].forEach.call(d, function(a, b) {
a.innerHTML = c[b] > f ? "" : "+"
})
})
});
</script>
</body>
</html>