Adding a class to an ID or passage permanently

Is there a way to add a class to an id selector permanently? In CSS I have the “hidden” class set to display: none in the stylesheet, and want it to be permanently added to the specialbuy id after the initial purchase. I realize what I’m going for can be done with a variable but if I could do it this way it would be more effecient memory wise, given I might have about 20 one time purchases. If this is not possible, other suggestions are welcome

Twine Version:2.315
Story Format: Sugarcube 2.34

/*Allow the purchase of an item one time only, refresh after purchase*/

<div id="specialbuy">
<<link "Purchase the forest map">>
	<<set $Inv.push("Forest map")>>
	<<addclass "#specialbuy" "hidden">>
       <<run state.display(state.active.title, null, "back")>>
<</link>>
</div>

The HTML elements generated by the processing of the content of the “current” Passage are destroyed (removed from the web-page’s Document Object Model) when the next Passage Transition occurs, so that the HTML elements generated by the processing of the content of the “next” Passage can replace them.

Because of this fact any dynamic alterations you did to any of those HTML elements (like adding a class to one) will be lost when a Passage Transition occurs. And the state.display() function you are using to “refresh” the entirety of “passage” area of the page causes such a Passage Transition.

So you basically have two options:

  1. Add code to the Passage that knows how to automatically add the “hidden” class to the <div> element associated with any “purchased” item.
    eg. Check if the $Inv Array contains “Forest map”, and if it does then add the “hidden” class to the <div> element when you create that element!
  2. Don’t use a Passage Transition to refresh the entire page when something is “purchased”, as ideally you should only be refreshing the minimum parts of the page needed to indicate a specific thing has been purchased.
    The downside of this option is that History is only updated during the Passage Transition process, so any variable changes you make won’t be persisted into History until the next Passage Transition occurs.

Guess option 1 might be be best then, since I want a “store” passage that you come back to at various points to buy from. Option 1 does have the limitation of never being able to delete the item from your inventory. For instance a potion that has a one time use. You drink it, ideally would like it to be removed from inventory, but then the shop would let you buy it once again.

I could make another array to keep track of all the one time items you have used, and have the store check against both that array and your regular inventory, might not be too bad effeciency wise.