title: Retrieving jQuery data from dynamic HTML element returns undefined
body: <p>I am trying to retrieve data from a variable HTML element. On click, the id of the <code>&lt;span&gt;</code> element is retrieved, which I want to enable me to dynamically <code>$([dynamic id])</code> select that element and request the data stored in the data attribute. </p>
  
  <p>My jQuery looks like this:</p>
  
  <pre><code>$( document ).ready( function() {
      $( ".checkmark" ).on( "click", ( event ) =&gt; {
          let checkBoxId = "#" + event.target.id, // #checkBox1
              checkBoxData = event.target.id + "-value", // checkBox1-value
              checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
      } );
  } );
  </code></pre>
  
  <p>The HTML element targeted looks like this:</p>
  
  <pre><code>&lt;span class="checkmark" id="checkBox1" data-checkBox1-value=-155&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The value of let checkBoxValue is undefined and I cannot figure out why.
  Help would be greatly appreciated.</p>