hi everyone!

i have a map with dots MAP which every 3 seconds shows a block with info

a function that is already in progress, and I want the function to stop when clicking on a point and display an infoblock for me(and i did it).

sorry in advance below is my code

// map with dots
var isActive = 0;
var isLoading = 1;
const count = document.querySelectorAll("[data-id]");//circle svg around dot

function removeClass() {
 let infoCards = document.querySelectorAll("[data-info-id]");// info page name of the project
 infoCards.forEach((el) => {
  el.classList.remove("show");
 });
 }
 function removeCircle() {
  count.forEach((el) => {
   el.style.display = "none";
 });
}

function ready() {
 function setAround(percent, idx) {
  removeCircle();
  let beforeElemIdx = idx === 0 ? count.length - 1 : idx - 1;
  let beforeElem = document.querySelector(
   '[data-id="' + beforeElemIdx + '"]'
  );
  let elem = document.querySelector('[data-id="' + idx + '"]');
  elem.style.display = "block";
  elem.classList.remove('active-circle');

  beforeElem.style.display = "block";
  const math = 2 * Math.PI * elem.r.baseVal.value;
  elem.style.strokeDasharray = `${math} 1000`;
  let a = math * (1 - percent / 100);
  elem.style.strokeDashoffset = a;

  if (percent >= 99.5) {
    removeClass();
    let infoShow = document.querySelector(`[data-info-id="${idx}"]`);
    infoShow.classList.add("show");
    isLoading++;
    if (isLoading === count.length) {
      isLoading = 0;
    }
  }
}

requestAnimationFrame(draw);

function draw(t) {
  let idx = isLoading;
  requestAnimationFrame(draw);
  setAround((t / 30) % 100, idx);//timer 3sec
 }
}

document.addEventListener("DOMContentLoaded", ready);

and i did this

  var dots = document.querySelectorAll(".dota");
  var infoCards = document.querySelectorAll("[data-info-id]");
  let circle = document.querySelectorAll('[data-id]');

  dots.forEach((el) => {
    el.addEventListener('click', () => {
     let idx = el.dataset.dota;
     let circle = el.dataset.dota;
     showInfo(idx);
     addCircle(idx);
    });
  });

  function showInfo(idx) {
    removeClass();
     let elem = document.querySelector(`[data-info-id='${idx}']`);
      elem.classList.add('show');
  }

  function addCircle(idx) {
   let circle = document.querySelector(`[data-id='${idx}']`);
   circle.classList.add('active-circle');
  }

and if u want my site pls dm me i'll send my github page

PUG CODE

TY ALL!