JSFiddle - React, Tailwind, and code Playground

HTML

<div id="botao1" class="botoes botaoativo"></div>
<div id="botao2" class="botoes"></div>
<div id="botao3" class="botoes"></div>
<div id="botao4" class="botoes"></div>

CSS

#botao4 {
margin-left: 10px;
width: 10px;
float: left;
height: 10px;
background-color: #333333;
cursor: pointer;
position: relative;
z-index: 10;
}


#botao3 {
margin-left: 10px;
width: 10px;
float: left;
height: 10px;
background-color: #333333;
cursor: pointer;
position: relative;
z-index: 10;
}

#botao2 {
margin-left: 10px;
width: 10px;
float: left;
height: 10px;
background-color: #333333;
cursor: pointer;
position: relative;
z-index: 10;
}

#botao1 {
width: 10px;
float: left;
height: 10px;
background-color: #333333;
cursor: pointer;
position: relative;
z-index: 10;
}

.botaoativo {
    background-color: #FFF000 !important;
}

JavaScript

$(".botoes").click(function() {
    $(".botoes").removeClass('botaoativo');
    $(this).addClass('botaoativo');
 });