MouseEnter and MouseLeave target multiple elements on local host

I am developing a website in Kirby environment and I have been testing it on localhost. A function within this website creates a highlight for each .main element that acquires a color upon hovering and changes back upon mouse leaving.

I have encountered a very specific problem that occures upon mouse hovering. The problem overall is that I am trying to target one element, however upon howering the mouse it fires them all at the same time.

I have console logged the function and it seems like that the code indeed detects multiple .main elements being selected.

The function works as intended when I run it on HTML directly from Visual Studio Code. (The screenshot attached is from that version.)

What could be the issue?

<?php foreach ($page->articles()->toStructure() as $article): ?>
                <div class="main">
                  <div class="container" onclick="toggleSibling(this);">
                      <div class="Title"><?= $article->title() ?></div>
                      <div class="Genre"><?= $article->genre() ?></div>
                      <div class="Publisher"><?= $article->publisher() ?></div>
                      <div class="Datum"><?= $article->datum() ?></div>
                  </div>
                  <div class="content">
                                            <div class="Info">
                      <?= $article->info()->kt() ?>
                  </div>
                      <div class="Image">
                          <!-- <img src="content/test/painting-forest-lake.jpg"> -->
                          <div class="swiper">
                              <div class="swiper-wrapper">
                                  <?php foreach ($article->images()->toFiles() as $image): ?>
                                      <div class="swiper-slide">
                                          <img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
                                      </div>
                                  <?php endforeach; ?>
                              </div>
                              <div class="swiper-scrollbar"></div>
                              <button class="slick-prev"></button>
                              <button class="slick-next"></button>
                          </div>
                      </div>
                      <div class="Page"></div>
                      <div class="Text">
                          <?= $article->text()->kt() ?>
                      </div>
              </div>
          <?php endforeach; ?>

document.addEventListener('DOMContentLoaded', () => {
  const mainElements = document.querySelectorAll('.main');
  const headerDivs = document.querySelectorAll('.container_header > div');

  const generateLightColor = () => {
    const randomValue = () => Math.floor(Math.random() * 156 + 100);
    return `rgb(${randomValue()}, ${randomValue()}, ${randomValue()})`;
  };

  mainElements.forEach(main => {
    const randomColor = generateLightColor();
    const container = main.querySelector('.container');
    const spans = main.querySelectorAll('span');

    console.log("Generated random color:", randomColor); 

    main.addEventListener('mouseenter', () => {
      container.style.backgroundColor = randomColor;
      document.documentElement.style.setProperty('--color-variable', randomColor);

      headerDivs.forEach(div => {
        div.style.backgroundColor = randomColor;
        div.style.color = container.style.color = 'black';
      });

      spans.forEach(span => {
        span.style.backgroundColor = randomColor;
        span.style.color = 'black';
      });

      console.log("Mouse entered main element:", main); 
    });

    main.addEventListener('mouseleave', () => {
      container.style.backgroundColor = 'var(--color-border-dark)';
      headerDivs.forEach(div => {
        div.style.backgroundColor = 'var(--color-border-dark)';
        div.style.color = container.style.color = 'var(--default-text-color)';
      });

      spans.forEach(span => {
        span.style.backgroundColor = 'transparent';
        span.style.color = 'inherit';
      });

      console.log("Mouse left main element:", main); 
    });
  });
});

I have tried multiple takes, but none of them lead to resloving the problem. A lead I got was it might have to do with dynamic content generation and duplicates.