title: JQuery three button click events executing on one click
body: <p>Code generates HTML + JS for each tab. Now on each tab i have 2 buttons that are generated within HTML using PHP. It also generated Javascript onclick event for each button using JQuery.</p>
  
  <p>this is the jquery click event for each button that is generated:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(function() {
          $(document).on("click", ".mybutton", function(e) {
              e.preventDefault();
              alert($(this).attr('whoami'));
              return false;
          });
      });
      &lt;/script&gt;'
  </code></pre>
  
  <p>now the two buttons that get generated by html have the following structure:</p>
  
  <pre><code>&lt;button type="button" class="mybutton" whoami="button_1"&gt;First Button&lt;/button&gt;
  &lt;button type="button" class="mybutton" whoami="button_2"&gt;Second Button&lt;/button&gt;
  </code></pre>
  
  <p>now html and JS both generate fine i see both buttons fine, no JS errors nothing. I can click on both buttons but here is what happens:</p>
  
  <p>When i click on First Button it alerts the following:</p>
  
  <pre><code> button_1
   button_2
  </code></pre>
  
  <p>both button clicks get executed because they have same class name. How do i prevent both buttons being executed? I need only the clicked button to be executed and not all of them.</p>
  
  <p>I tried adding <strong>e.stopImmediatePropagation()</strong> and this is what happens:</p>
  
  <p>when i click on First Button i get alert correctly it only executes button_1 click, but when i click on Second Button it only executes button_1 click event instead of button_2.</p>
  
  <p>Please help.</p>
  
  <p><strong>NOTE:</strong>
  the reason i think it executes both is because there are 2 javascript parts that get appended to html and both scripts have on click event on <strong>.button</strong> but i cant change this code i need to somehow make sure only the clicked button gets executed.</p>