title: Open button with different data-attribute with jquery
body: <p>I am having a table with 3 buttonsand I am using <code>jquery-"3.2.1"</code>.</p>
  
  <p>I am trying to use the below javascript-file <code>Builder</code> to load the proper data later in the if statements.</p>
  
  <p>My <code>expected output</code> is:</p>
  
  <p>If pressing f.ex.: the <code>Add CPU</code> button, then the alert message <code>console.log("cpu clicked")</code> should appear.</p>
  
  <p>Below you can find my minimum viable example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Builder {
    constructor() {
      this.events();
    } // end constructor
  
    events() {
      $(".btn btn-primary btn-sm").on("click", this.ourClickDispatcher.bind(this));
    }
  
    // methods
    ourClickDispatcher(e) {
      var currentButton = $(e.target).closest(".btn btn-primary btn-sm");
      console.log("test")
  
      if (currentButton.data('exists') == 'cpu') {
        console.log("cpu clicked")
      }
  
      if (currentButton.data('exists') == 'motherboard') {
        console.log("motherboard clicked")
      }
  
      if (currentButton.data('exists') == 'graphic-card') {
        console.log("graphic-card clicked")
      }
    }
  
  }
  
  export default Builder;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table style="float: left;" class="table table-bordered"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;CPU&lt;/td&gt;
        &lt;td&gt;
          &lt;button type="button" data-cpu="cpu" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"&gt;
                                              Add CPU
                                          &lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Motherboard&lt;/td&gt;
        &lt;td&gt;
          &lt;button type="button" data-motherboard="motherboard" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"&gt;
                                              Add Motherboard
                                          &lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Graphic Card&lt;/td&gt;
        &lt;td&gt;
          &lt;button type="button" data-graphicCard="graphic-card" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal"&gt;
                                              Add Graphic Card
                                          &lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see all 3 buttons have the same <code>class</code> attribute, but differentiate in the <code>data-</code> attribute to load the proper output.</p>
  
  <p>Any suggestions why the below script does not give me the <code>expected output</code> if any of the buttons is clicked?</p>
  
  <p>I appreciate your replies!</p>