menu hover effects not working

document.addEventListener('DOMContentLoaded', function(){
   jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(index, el){
        var elVal = jQuery(el).text();
        jQuery(el).attr('data-hover', elVal);
    });
  jQuery(".nav-hover-effect .main-menu .nav.menu > li a").wrapInner("<span></span>");
 jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(){
      let style = getComputedStyle(this),
          color = style.backgroundColor,
          borderColor = style.borderTopColor;
      this.style.setProperty('--button-background-color', color);
      this.style.setProperty('--button-border-color', borderColor);
    }).on('mouseenter', function(){
        let color = getComputedStyle(this).backgroundColor;
        this.style.setProperty('--button-background-hover', color);
    });
});