Changing width and position of my div element using JavaScript and a transition style becomes very laggy

Question

monthlyButton.addEventListener('click', () => {
    if (planTerm === 1) {
      basicPrice = prices.monthly.basic;
      essentialsPrice = prices.monthly.essentials;
      premiumPrice = prices.monthly.premium;
      elitePrice = prices.monthly.elite;
      planTerm = 12;

      renderPlanContainers();

      document.querySelectorAll('.plan-subtitle-bill').forEach((element) => {
        element.classList.add('subtitle-bill-hidden');
      });

      selectorBackground.style.transform = 'translateX(0%)';
      selectorBackground.style.width = '7rem';
    }
  });

  yearlyButton.addEventListener('click', () => {
    if (planTerm === 12) {
      basicPrice = prices.yearly.basic;
      essentialsPrice = prices.yearly.essentials;
      premiumPrice = prices.yearly.premium;
      elitePrice = prices.yearly.elite;
      planTerm = 1;

      renderPlanContainers();

      document.querySelectorAll('.plan-subtitle-bill').forEach((element) => {
        element.classList.remove('subtitle-bill-hidden');
      });

      selectorBackground.style.transform = 'translateX(46%)';
      selectorBackground.style.width = '15rem';
    }
  });

I have event listeners that when a button is clicked, it changes some HTML, renders it, and changes the width and position of a selectorBackground to show which button is "selected". It works as intended for a while, but after 10+ clicks back and forth the animation starts lagging and it becomes more glitchy.

I tried shortening the transition time, removing the transform style and the width style changes individually to see if one of them was causing the lag (both caused lag after some time). I think it has something to do with changing the width and/or translating, because even if I remove the transition time style, it still causes lag after some time. Help is much appreciated!