It's been a while - Bricks Builder query loop

It's been few since I stepped in here.

I haven't had many opportunities with projects in the last few months to use mp. Maybe my thinking is offset a bit.

I have a hover effect on a card to change the hero background of the hero image. I'm setting that up some interactions that are working with the query loop in Bricks Builder.

Since... bricks doesn't give any id's on their query loop, I manage to add them with js give the id's a sequence.

let service_loop = document.querySelector("#brxe-dsvukn");
let service_children = service_loop.children;

for (let i = 0; i < service_children.length; i++) {
  service_children[i].id = `service-card-${i + 1}`;
}

let hero_image_loop = document.querySelector("#brxe-xfahdk");
let hero_image_children = hero_image_loop.children;

for (let i = 0; i < hero_image_children.length; i++) {
  hero_image_children[i].id = `hero-image-${i + 1}`;
}

html output,

Followed by this for the hover effect that adds class to the hero image bg that I want to show,

document.getElementById("hero-image-1").classList.add("active");

let activeId = null;

function toggleActiveClass(id) {
  document.getElementById(`service-card-${id}`).addEventListener("mouseover", function() {
    if (activeId && activeId !== id) {
      document.getElementById(`hero-image-${activeId}`).classList.remove("active");
    }
    document.getElementById(`hero-image-${id}`).classList.add("active");
    activeId = id;
  });
}

for (let i = 1; i <= 3; i++) {
  toggleActiveClass(i);
}

I'm no king of js. Through some trials, I have this working without mp. I am not confident that what's above is written well.

Anyways, my ask is. Revisiting mp, I wasn't quite sure how to wrap my head around what I was trying to do. Specifically with the interactions.

Any feedback is cool.