1) You've got perfectly good classes, so why piss on the markup with data attributes?
2) If every element inside a parent is getting the same classes, NONE of them should have classes.
3) Rather than queryALL every joe-blasted time, how about walking the DOM instead? Be faster and cleaner.
4) If those button only work when scripting is enabled, why are they in the markup? Just trying to confuse users on screen readers, braille readers, search engines, and any other concievable non-visual UA's? Much less I'm sure they make so much sense for print. Generate those on the DOM, not in the markup.
Good rule of thumb, if you need more than one "get" for an entire structure, you're doing something wrong.
Apart from that, I'm trying to figure out why you seem to think that the style is any of your business in the code, or why you seem to be screwing around with all those calculations when CSS should be doing your heavy lifting. Really for something like this if your scripts are doing anything more than simple class swaps, there's something WRONG.