Modifying style in JS bypassing current styleSheets.cssRules lmitations with loops on get ID

Firstly, apologies if an answer is somewhere around the internet, but I've searched far and wide and found nothing relevant.

So, as most of you are aware, there are limitations from injecting rules in CSS sheets in certain conditions. Mine is that I cannot use a variable inside a .div:nth-child(thejsvariable) {transform: whatever-transform-option;}. But that extends to any style modifications on using JS variable in the CSS string.

I've tried vaaaarious options and ideas. The most recent one is the one with this problem. I'm trying to modify any style with a simple getElementById, in which the ID consists of the string "hexpod" and the loop variable.

Now, for the loop variable I need it to select specific items that are on each second row of a grid. So Tried to nest multiple loops with "multiple of" conditionals.

var wholeRowItems = rowIterations.toFixed(0);

for (var r = 1; r <= hexIterations; r++) {
  if (r % 15 == 1 ) {
    console.log(r);
      for (var t = 1; t <= wholeRowItems; t++) {
        console.log(t);
    }
  }
}

For a bit of Context my grid is fully responsive related to the size of the body. So the var rowIterations returns how many items with fixed size fit in the body on a row. In my case it's 15 with the toFixed(0) method. The var hexIterations returns how many items fit in the body. In my case it's 134 items. Console log returns (not an array, but separate numbers) the range between 1 and 15 followed each time by 16, 31, 46 and so on.

At this point I'm just very frustrated and crying for help on solutions or at least ideas.

You can find the entire code here, if you want to see what's up around the problem, just in case it's relevant.

https://jsitor.com/AXU_pOzBD

Edit: I forgot to mention that once I've placed a getElementById('hexpod' + r + t) it selected only 2 rows, starting in the middle of the rows, one at the beginning and one at about the end aand my brain just faded away.