Q:

Retrieving jQuery data from dynamic HTML element returns undefined

I am trying to retrieve data from a variable HTML element. On click, the id of the <span> element is retrieved, which I want to enable me to dynamically $([dynamic id]) select that element and request the data stored in the data attribute. 
My jQuery looks like this:
$( document ).ready( function() {
    $( ".checkmark" ).on( "click", ( event ) => {
        let checkBoxId = "#" + event.target.id, // #checkBox1
            checkBoxData = event.target.id + "-value", // checkBox1-value
            checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
    } );
} );

The HTML element targeted looks like this:
<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>

The value of let checkBoxValue is undefined and I cannot figure out why.
Help would be greatly appreciated.

A:

It's returning undefined because it is declared incorrectly. The part after data- should be in lower case. In your case, it must be 
<span class="checkmark" id="checkbox1" data-checkbox1-value=-155></span>

for the .data() to work.

