Counting the number of indicators that are active

Question

Im very new to javascript, ive googled for a few days and tried using chapgpt for help but im officially stuck.

The grupp2 selections shows as name="grupp2" is written to the div in the indicator html. The ID of aktiv is written based on the value from the machine. THis is what ive tried. "querySelectorAll" doesnt seem to work for me, most likely because im inside operations hub. THis is the counter:

    let printTotals = document.getElementsByClassName("counter-total");
    let printActives = document.getElementsByClassName("counter-active");

    function countActives() {
    const totals = document.getElementsByName("grupp2");
    const actives = document.querySelectorAll("#aktiv");
 
    console.log('Aktiva', actives);
    console.log('Total',  totals);
  
    printActives[printTotals.length - 1].innerHTML= actives;
    printTotals[printTotals.length - 1].innerHTML= totals;
}

THis is the script for the indicator:

let shape = document.getElementsByClassName('mainMachineNo');
let shape2 = document.getElementsByClassName('statusMachineNo');

// --- Start Operations Hub Javascript API --- //
function useData(data) {
    data = data || EMBED.getData(); 
changeColor(data);
    console.log(data);
}
EMBED.onChangeData(useData); 
// --- END Operations Hub Javascript API --- //

useData();
function changeColor(data) {
  let maskinstatus = data['valueFromMachineSignal'];
  switch(true){ 
        case (maskinstatus == '30'):
                shape[shape.length - 1].style.backgroundColor = "#008000";  
                shape2[shape2.length - 1].innerHTML = ['I DRIFT'];
                shape[shape.length - 1].setAttribute('id','aktiv');
      break;
        case (maskinstatus < '1'):
                shape[shape.length - 1].style.backgroundColor = "#ff0000";
                shape2[shape2.length - 1].innerHTML = ['STOPP'];
        break;
        case (maskinstatus <= '29'):
                shape[shape.length - 1].style.backgroundColor = "#ffa500";
                shape2[shape2.length - 1].innerHTML = ['SETUP'];
        break;

        default:
            shape[shape.length - 1].style.backgroundColor = "#0000ff";
            shape2[shape2.length - 1].innerHTML = ['Error'];
    } 
 }

Here is the HTML for the indicator, where i want the counter to look.

<div class="mainMachineNo" name="groupNo" data-grupp="groupNo">
    <div class="maskinMachineNo">
    M260</div>
    <div class="statusMachineNo">
      Status</div>
  </div>

And heres the HTML for the counter

  <div class="counter-body">
    <div class="counter-active"></div>
    <div class="counter-total"></div>
  </div>

Where am I going wrong?

Aktiva NodeList 
length:0

Total NodeList 
0: div#aktiv.main260
1: div.main262
2: div.main264
3: div.main268

this is what the console log tells me.