Iterate through document.querySelectorAl ascendand elements

Hope you could help me solve this JS puzzle.

I need to run through the webpage, find divs with class “lstp-t” then hover over the container div.user-grid-card_avatar and press some more buttons which are loaded via AJAX.

Here’s the HTML:

<div class="ugrid_i">
  <div class="user-grid-card __xs">
    <div class="user-grid-card_avatar"></div>
   <divclass="user-grid-card_cnt">
      <div class="ellip"></div>
      <div></div>
    </div>
  </div>

<div class="ugrid_i">
  <div class="user-grid-card __xs">
    <div class="user-grid-card_avatar"><!-- this I want to hover over --></div>
   <div class="user-grid-card_cnt">
      <div class="lstp-t"></div>
      <div></div>
    </div>
  </div>

</div>

I went to read about querySelectorAll at MDN and several hours after I wrote this:

// Find all elements containing the specified text
const elementsWithText = document.querySelectorAll("div.lstp-t");

console.log(elementsWithText);
// outputs [NodeList(65) [div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t, div.lstp-t]

// Define the class name of the parent container
const parentContainerClass = ".user-grid-card_avatar";

    // Iterate through the elements containing the text
    elementsWithText.forEach(element => {
        // Find the parent container with the specified class
        let parentContainer = element.closest('parentContainerClass');

        console.log(parentContainer); // outputs 65 null and the rest doesn't work of course

        
        let event = new Event('mouseenter', {
        'view': window,
        'bubbles': true,
        'cancelable': true
        });
        
        
        // If a parent container with the specified class is found, trigger a click event on it
        if (parentContainer) {
            parentContainer.dispatchEvent(event); // Trigger click event
        }
    });

I would appreciate any ideas from you guys!