Run individual on gsap, but not on my own function

JavaScript
#1 
gsap.registerPlugin(CSSRulePlugin);
let infoBefore = document.querySelectorAll(
  '.features .featuresBox .feature .info'
);



CSSPlugin.defaultSkewType = 'simple';


const sheet = new CSSStyleSheet();

function runs() {
  // document.head.appendChild(styleSheet);
  sheet.replaceSync(`
    .features .container .featuresBox .feature .info::before{
      transform: skewY(15deg);
    }`);
  document.adoptedStyleSheets = [sheet];
}
function notRuns() {
  // document.head.appendChild(styleSheet);
  sheet.replaceSync(`
      .features .container .featuresBox .feature .info::before{
        transform: skewY(-15deg);
      }
    `);
  //applay the stylesheet to document
  document.adoptedStyleSheets = [sheet];
}

infoBefore.forEach((info) => {
  // let before = getComputedStyle(info, '::before');
  // console.log(before);
  let hover = gsap.to(info, {
    paused: true,
    skewY: 15,
  });
  // let hover2 = gsap.to(info, {
  //   paused: true,
  //   // skewY: 15,
  //   notRuns: notRuns,
  // });
  // info.parentElement.addEventListener('mouseenter', () => runs());
  // info.parentElement.addEventListener('mouseleave', () => notRuns());
  info.parentElement.addEventListener('mouseenter', () => hover.play());
  info.parentElement.addEventListener('mouseleave', () => hover.reverse());
});

what is problem here, When I hover with the gsap it’s work on individual element , but when I run my own functions runs and notRuns It’s work with all element at the same
this is the link : review-HTML-css-js-al-zero/project/MyWorkDesign3 at master · haniissa/review-HTML-css-js-al-zero · GitHub