I have two buttons that are created according to what comes from api:
<div class="col-2">
<button type="button" class="btn btn-success button-ok botOk" value="${element.NUMOS}" id="${element.COD_PROD}" onClick="sim(this);">SIM</button>
</div>
<div class="col-2">
<button type="button" class="btn btn-danger button-ok" value="${element.NUMOS}" id="${element.COD_PROD}" onClick="cance(this);">NÃO</button>
</div>
<div class="col">
<p class="prod">${element.PRODUTO}</p>
</div>
The COD_PROD are the same on the YES and NO buttons.
The end user has to click yes or no, and as I get the data from the api, this ${element.PRODUTO}
can come more than 1, so I did with a forEach to create another div with the buttons and name of the product automatically.
But when I click yes on a product, and I'll click on the other, the button will deactivate the previous one and only the current one will be clicked.
Can anyone help me?
Code that changes status:
$('button').click(function () {
var clicado = $(this); //captura o botao clicado
$('button').removeClass('ativo') // remove a classe dos demais botoes
clicado.addClass('ativo');// adiciona a classe ao botao alvo
})