Due pulsanti con lo stesso ID e classe, solo uno trovato funzionante

Question

Sto lavorando con jira e ci sono due pulsanti con lo stesso ID e classe. Entrambi sono pulsanti di invio, uno in alto e uno sotto e quando uso il jquery sottostante solo il primo viene catturato mentre faccio clic. L'intenzione è rendere obbligatori i commenti nel campo test.

Funziona solo quello in alto ..

<script>
AJS.toInit(function () {
   AJS.$("#next").click(function(e){ var comment=AJS.$("#jira #page #content .aui-page-panel .aui-page-panel-inner .aui-page-panel-content #bulkedit .form-body .aui .comment-input #comment").val();
    if(comment==""){
    AJS.$(".bulk-affects").append("<br/><div id='resErrror' style='color:red;margin-left:30px'>Comment is mandatory</div>");
       return false;
       }

   });

   });
</script> 

Per favore aiutami a catturare entrambi i pulsanti successivi per lavorare con questo script

Answer 1

Gli ID devono essere univoci, quindi dovresti utilizzare un determinato ID solo una volta su una pagina. In realtà, quando provi a chiamare l'elemento utilizzando il codice ID chiama solo il primo elemento. Le classi possono essere utilizzate ripetutamente

Answer 2

querySelectorAll troverà tutti gli ID

const allButtons = document.querySelectorAll('#next');
for (let button of allButtons) {
  $(button).click((e) => {
    // Do your magic here
  })
}

Answer 3

Ricorda: un elemento di una pagina web ha determinati diritti inalienabili; avere un ID univoco è uno di questi. Previeni il furto di identità degli elementi html assicurandoti che ogni elemento della tua pagina web che necessita di un ID ne abbia uno unico.

Ma le lezioni possono essere ripetute.