Why does it seem this code's being selective?

Question

SUGARCUBE 2.2.1

So in the below code- and yes I know I gotta be careful what I put, so we're using generic stuff to replace some of it... but, it seems to only work with half the code. The other two buttons do what is needed: they get clicked on, set variables, then poof away. But the other two don't work. Why so?

 

@@#masochist-kink;<<nobr>>
@@.button-black;<<button "I get off on pain.">>
<<set $masochist to 1>>
<<remove #masochist-kink>>
<</button>>
<</nobr>>@@;
@@

@@#certainkink;<<nobr>>
@@.button-black;<<button "this is really depraved and dark...">>
<<set $me to 1>>
<<remove #certainkink>>
<</button>>
<</nobr>>@@;
@@

@@#alcohol;<<nobr>>
@@.button-black;<<button "I'm addicted to alcohol.">>
<<set $alcoholic to 1>>
<<remove #alcohol>>
<</button>>
<</nobr>>@@;
@@

@@#hurt-kink;<<nobr>>
@@.button-red;<<button "I sometimes hurt myself. Badly.">>
<<set $selfharm to 1>>
<<remove #hurt-kink>>
<</button>>
<</nobr>>@@;
@@

 so with one and three, they do their thing and they're gone. They all show up with the desired colors, which is good! More than I hoped for... but now I expect them all to do the same- show up with desired text color, allow a player to click, set a variable then disappear..... not uh, give me an error on second code that "replace could not work sicne there is no element named  #certainkink" and on four just not work at all.

Answer 1

You cannot nest custom style markup. This means that for each button, you'll need to switch the internal or external @@ with a real html element, like a span.

Comments

Okay, but, how do I do this? I'm fairly new to HTML coding as it is ^^'

---

Something like 

<span id="alcohol">...</span>

Or 

<span class="button-black">...</span>

Note that you should also quote the selectors in your DOM macros, and you should probably be using an empty replace macro, not the remove macro. Eg

<<replace "#alcohol">><</replace>>

 

---

I see. And, if I may ask, how does that work? would it then be such as 

@@#certainkink;<<nobr>>
<span class="button-black">;<<button "this is really depraved and dark...">>
<<set $me to 1>>
<<remove #certainkink>>
<</button>>
</span>;
@@

or how does this work?

---

That's correct, but see my edits about your use of the remove macro.

---

Thank you very much, this seems to be working well now. I greatly appreciate the help~

---

I would suggest selecting this answer or writing the working answer down into an answer yourself and selecting that rather than locking the question to help future users.