Can I use the same JavaScript Function on multiple Div's?

Question

I'm new to javascript and I need to make circle progress that shows percentage with animated bar
luckily I have done it but the problem is I want to make 5 or more of the same circle with the different percentages and **I need to start on page load not by click ** So how to call the function on more than one div so that the circles appears with different percentages at the same time

Here's my JS code

let firstLayer = document.querySelector('.cardHolder'),
  secondLayer = document.querySelector('.skillSecond'),
  startValue = 0,
  endValue = 50,
  duration = 20;

let progress = setInterval(() => {
  startValue++
  secondLayer.textContent = `${startValue}%`
  firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)`
  if (startValue == endValue) {
    clearInterval(progress)
  }
}, duration);

.cardHolder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg);
  width: 100px;
  height: 100px;
  border-radius: 100%;
}

.skillFirst {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #90697a;
  width: 80%;
  height: 80%;
  border-radius: 100%;
}

.skillSecond {
  font-family: 'Montserrat Subrayada', sans-serif;
  font-size: 24px;
}

<div class="cardHolder">
  <div class="skillFirst">
    <div class="skillSecond">
      <span class="skillContent"></span>
    </div>
  </div>
</div>

Answer 1

This is what i came up with. Basically it works by making an array of objects containing the specifications for each individual progressbar. Then loop over the specifications and start every Interval.

let progression = [
                    {
                      progressBarId: "first",
                      progressBarLabelId: "first_label",
                      startValue: 0,
                      endValue: 50,
                      duration: 20
                    },
                    {
                      progressBarId: "second",
                      progressBarLabelId: "second_label",
                      startValue: 10,
                      endValue: 100,
                      duration: 10
                    },
                    {
                      progressBarId: "third",
                      progressBarLabelId: "third_label",
                      startValue: 50,
                      endValue: 80,
                      duration: 20
                    }
                  ];
                  
window.onload = function() {

  for(var i = 0; i < progression.length; i++) {
    let firstLayer = document.getElementById(progression[i].progressBarId),
    secondLayer = document.getElementById(progression[i].progressBarLabelId),
    startValue = progression[i].startValue,
    endValue = progression[i].endValue,
    duration = progression[i].duration;
  
  
    let progress = setInterval(() => {
      startValue++
      secondLayer.textContent = `${startValue}%`
      firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)`
      if (startValue == endValue) {
        clearInterval(progress)
      }
    }, duration);

  }


}

.cardHolder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg);
  width: 100px;
  height: 100px;
  border-radius: 100%;
}

.skillFirst {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #90697a;
  width: 80%;
  height: 80%;
  border-radius: 100%;
}

.skillSecond {
  font-family: 'Montserrat Subrayada', sans-serif;
  font-size: 24px;
}

<div class="cardHolder" id="first">
  <div class="skillFirst">
    <div class="skillSecond" id="first_label">
      <span class="skillContent" ></span>
    </div>
  </div>
</div>

<div class="cardHolder" id="second">
  <div class="skillFirst">
    <div class="skillSecond" id="second_label">
      <span class="skillContent" ></span>
    </div>
  </div>
</div>

<div class="cardHolder" id="third">
  <div class="skillFirst">
    <div class="skillSecond" id="third_label">
      <span class="skillContent" ></span>
    </div>
  </div>
</div>

Hope this helps, if not, please comment!