Previous button disables when clicked on next

1

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                
                })
    
asked by anonymous 17.10.2018 / 16:22

1 answer

2

When he calls this line:

$('button').removeClass('ativo') // remove a classe dos demais botoes

It disables everyone, I imagine the intention is to remove the "YES" if your click on the "NO" of the same product. If all that html block that you put in the question for a product is inside an html tag that encompasses each product, you can do ...

clicado.parent().parent().find('button').removeClass('ativo') // remove a classe dos demais botoes

I did a fiddle to demonstrate!

    
17.10.2018 / 16:43