https://pt.stackoverflow.com/questions/322791/como-deixar-op%c3%a7%c3%a3o-marcada-ao-clicar-em-div?rq=1

<br>


<script language="JavaScript">
$(document).ready(function(){
    $(".divs").on("click", function(){          // pega click na div
      $(".divs").each(function(){               // para cada div
        $(this).removeClass("selecionado");     // remove a classe selecionada
      })
      $(this).addClass("selecionado");          // adicona a classe no click
      console.log($(this).prop("id"));          // mostra a div selecionada
    })      
})
</script>


<style type="text/css">
	
#div-pai{
  width: 150px;
  display: flex;
  justify-content: space-between;
}
.divs{
  width: 25px;
  height: 25px;
  cursor: pointer;
}
#amarela{
  background-color: yellow;
}
#vermelha{
  background-color: red;
}
#azul{
  background-color: blue;
}
.selecionado{
  border: solid 3px #000;
}


</style>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div-pai">
  <div class="divs" id="amarela"></div>
  <div class="divs" id="vermelha"></div>
  <div class="divs" id="azul"></div>
</div>