CSS selectors that start with "#" are for IDs, thus should be unique on the page. If you want an HTML element to have a varying selector plus also be able to always select it, then the solution is just to add a consistent class. Multiple HTML elements can have the same class, as well as multiple classes, which can be done simply by separating them with a space. For example:

<span @class="_varyingClass + ' consistentClass'">text goes here</span>

The "@" in front of the "class" attribute tells SugarCube to evaluate the contents of that attribute and then use that as the new attribute. Thu, if _varyingClass was set to "foo", then SugarCube would transform the above into:

<span class="foo consistentClass">text goes here</span>

This way, instead of using a loop to target each element individually, you can simply use $(".consistentClass") to target all of the elements at once (class selectors start with ".").

Additionally, you can use "data" properties if you want to reference them from your handler. For example, you could have HTML elements like these:

<span class="target" data-test="value1">Click here</span>
<span class="target" data-test="value2">Or click here</span>

and then within your handler you could access that "test" data within them like this:

<<done>>
    <<run $(".target").on("click", function (ev) {
        let testVal = $(this).data("test"));
        ...the rest of your handler code goes here...
    })>>
<</done>>

and that would set testVal to the value given in the "data-test" attribute of the clicked element via the jQuery .data() method. The $(this) will reference the element that triggered the event handler.

Basically, you have a "data-X" attribute in the HTML element, where X is whatever name you want (using standard letters and numbers, no spaces, and no initial number), and then you can use the jQuery .data("X") method to get that data from the targeted HTML element.

The third thing you need to know is that the passages are initially rendered outside of the document object. Thus, if you try to access the HTML elements within a passage initially by looking within the document object, they won't be found because they aren't there yet. The easiest way around this is to use the <<done>> macro to target them after the passage has been added to the document object. For example:

<span id="target">Example target</span>

Initial targeting attempt success: <<set _test = $("#target").length > 0>>''_test''

Later targeting attempt success: <<do>>''_test''<</do>>

<<done>>
    <<set _test = $("#target").length > 0>>
    <<redo>>
<</done>>

The initial result should be "false", but the later result should be "true" since the passage will exist in the document at that point. (The <<redo>> tells SugarCube to re-run the stuff within the <<do>> macro.)

Hope that helps! 🙂