Here's a simple example using JQuery
$("div").on('click', function(){
$('div').removeClass('selecionado');
$(this).toggleClass('selecionado');
});
div{
height:20px;
width:20px;
display:block;
border: 1px solid black;
}
.selecionado{
background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
First you need to relate the divs and for this I recommend a date attribute. So it fulfills its role and you do not mix the control of the action with your class responsible for the format. The group also serves for you to apply the action in only a few divs and changing the value of the attribute you can apply multiple times on the same page.
In the example below I chose the "data-group" attribute, but could be sausage-date. I also chose the "my-group" value, but it could be anything too. What's important is you set a good name to make the functionality clear.
<div data-group="meu-grupo">Primeiro</div>
<div data-group="meu-grupo">Segundo</div>
<div data-group="meu-grupo">Terceiro</div>
Now that all divs have a relationship you can control the click with jQuery. Note by the jQuery selector that I'm catching all the divs that have the date-group attribute with the value equal to "my-group". So be careful when changing the name and value of the attribute.
$("div[data-group=meu-grupo]").on('click', function(){
// Removemos a classe de todas as divs do grupo
$("div[data-group=meu-grupo]").removeClass("minha-classe");
// Agora adicionamos a classe somente no item clicado
$(this).addClass("minha-classe");
})