My JSP generates two buttons with same id, but when I click on it I want just the one I click on to change style. This is my JSPcode:
<%for(MetodoPagamentoBean m : result){%>
<button class="method-1" id="metodo-pagamento-scelto">
<span><ion-icon name="card"></ion-icon><ion-icon class="checkmark" name="checkmark-circle" id="carta-scelta" style="display:none;"></ion-icon></span>
<span><b>Numero:</b> <%= "XXXX XXXX XXXX " + m.getNumeroCarta().substring(m.getNumeroCarta().length()-4) %></span>
<span><b>Intestatario:</b> <%= m.getNomeIntestatario()%></span>
</button>
<%} %>
while my jQuery is:
$("#metodo-pagamento-scelto").click(function(){
$("#carta-scelta").show();
$("#metodo-pagamento-scelto").css("border", "2px solid green");
});
How can I correct this behavior?
class="metodo-pagamento-scelto".css() when not necessary. Use jQuery's .toggleClass() or addClass() instead.this in jQuery like $(this) to refer to the event currentTarget Element$(".metodo-pagamento-scelto") // Use classes
.on("click", function() { // Use the .on() Method
$("#carta-scelta").show();
$(this).addClass("active"); // Use $(this) to refer to the clicked button
});
CSS:
.metodo-pagamento-scelto.active {
border: 2px solid green;
}