title: Click on multiple elements with same ID
body: <p>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:</p>
  <pre><code>&lt;%for(MetodoPagamentoBean m : result){%&gt;    
    &lt;button class=&quot;method-1&quot; id=&quot;metodo-pagamento-scelto&quot;&gt;
      &lt;span&gt;&lt;ion-icon name=&quot;card&quot;&gt;&lt;/ion-icon&gt;&lt;ion-icon class=&quot;checkmark&quot; name=&quot;checkmark-circle&quot; id=&quot;carta-scelta&quot; style=&quot;display:none;&quot;&gt;&lt;/ion-icon&gt;&lt;/span&gt;
      &lt;span&gt;&lt;b&gt;Numero:&lt;/b&gt; &lt;%= &quot;XXXX XXXX XXXX &quot; + m.getNumeroCarta().substring(m.getNumeroCarta().length()-4) %&gt;&lt;/span&gt;
      &lt;span&gt;&lt;b&gt;Intestatario:&lt;/b&gt; &lt;%= m.getNomeIntestatario()%&gt;&lt;/span&gt;
    &lt;/button&gt;
   &lt;%} %&gt;
  </code></pre>
  <p>while my jQuery is:</p>
  <pre class="lang-js prettyprint-override"><code>$(&quot;#metodo-pagamento-scelto&quot;).click(function(){
    $(&quot;#carta-scelta&quot;).show();
    $(&quot;#metodo-pagamento-scelto&quot;).css(&quot;border&quot;, &quot;2px solid green&quot;);
  });
  </code></pre>
  <p>How can I correct this behavior?</p>