I am having problems with intersection observer. I want to add the classList "percent-animate" to only the element with the dataset.id = "percentage-status". However, this classList is also being added to the elements underneath it. If i return out of the if block for the percentageBar.dataset.id === "percentage-status" if statement, then the if block underneath doesn't run. Any ideas how to solve this?

const inLeft = document.querySelector(".in-left");
const inRight = document.querySelector(".in-right");
const animate = document.querySelector(".percent-animate");
const percentageBar = document.querySelector(".container__percent-progress");

const skillsObserver = new IntersectionObserver(
  function (entries, skillsObserver) {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;

      if (percentageBar.dataset.id === "percentage-status") {
        entry.target.classList.add("percent-animate");
        console.log("it worked");
      }

      if (entry.isIntersecting) {
        entry.target.classList.add("mergeLeft");
        entry.target.classList.add("mergeRight");
        skillsObserver.unobserve(entry.target);
        return;
      }
    });
  },
  {
    threshold: 0.5,
  }
);

skillsObserver.observe(percentageBar);
skillsObserver.observe(inLeft);
skillsObserver.observe(inRight);