why do these similiar functions not work?

I have some divs and if i hover them I want an popup to show. I have six divs and six popups to show but not all at once instead only one per one.

The first function works fine but then the other do not work how can I move them all to one snippet?

<script>
  document.addEventListener('DOMContentLoaded', function() {
    let elements = document.querySelectorAll('#Mitarbeiter1Punkt');
    let popupposts = ['647'];
    elements.forEach(function(e, i) {
      e.addEventListener('mouseenter', function() {
        elementorProFrontend.modules.popup.showPopup({
          id: popupposts[i]
        });
      });

      e.addEventListener('mouseleave', function(event) {
        jQuery('body').click();
      });
    });
  });

  document.addEventListener('DOMContentLoaded', function() {
    let elements = document.querySelectorAll('#Mitarbeiter2Punkt');
    let popupposts = ['656'];
    elements.forEach(function(e, i) {
      e.addEventListener('mouseenter', function() {
        elementorProFrontend.modules.popup.showPopup({
          id: popupposts[i]
        });
      });

      e.addEventListener('mouseleave', function(event) {
        jQuery('body').click();
      });
    });
  });
</script>

Answer

okay so actually i figgered it out myself:

<script>
document.addEventListener('DOMContentLoaded', function() {
    let elements = document.querySelectorAll( '.mitarbeiterPunkt' );
    let popupposts = [ '647', '656', '660', '664', '664', '668', '672']; 

    elements.forEach(function(e,i){
            e.addEventListener( 'mouseenter', function(){
            elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
        } );

        e.addEventListener( 'mouseleave', function(event){
            jQuery('body').click();
        });
    });
});
</script>

Advertisement

Answer