JSFiddle - React, Tailwind, and code Playground

HTML

<div id="botoes">
<div id="botao1" class="botaoativo"></div>
<div id="botao2"></div>
<div id="botao3"></div>
<div id="botao4"></div>
</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 div").each(function() {
    $(this).click(function() {
        $(".botaoativo").removeClass('botaoativo');
        $(this).addClass('botaoativo');
    });
});