How to make the script work for all of the specified id?

I have a script which animates the numbers ,but it only works for one id though that id a few lines
The question is how to make it work for all id's on the page?
<div class="col-md-4">
 <div class="box-n" style="background: #fe754b;">
 <h3 data-num="2" id="fun-level">0%</h3><span class="text-nb">After</span>
 <h3 data-num="9" class="num-n">0%</h3><span class="text-n">Before</span>
</div>
</div>
 <div class="col-md-4">
 <div class="box-n" style="background: #decb41;">
 <h3 data-num="40" id="fun-level">0%</h3><span class="text-nb">After</span>
 <h3 data-num="18" class="num-n">0%</h3><span class="text-n">Before</span>
</div>
 </div>

var time = 2, cc = 1;

$(window).scroll(function() {
$('#fun-level').each(function(){
 var cPos = $(this).offset().top;
 var topWindow = $(window).scrollTop();

 if (cPos < topWindow + 1000) {
 if (cc < 2) {
 cc = cc + 3;
 var 
 i = 1,
 num = $(this).data('num'),
 step = 1000 * time / num,
 that = $(this),
 int = setInterval(function(){
 if (i <= num) {
 that.html(i + '%');
}
 else {
clearInterval(int);
}
i++;
},step);
}
}
});
});
June 14th 19 at 18:04
3 answers
June 14th 19 at 18:06
Solution
Id on a page must be unique as this indicator of the element, because jquery and returns only Pervy random element. Add elements to the class (can be same as the id) and the string
$('#fun-level').each(function(){

change the selector to select by class
$('.fun-level').each(function(){
does not work and so - Rusty_Emard85 commented on June 14th 19 at 18:09
And the classes you added? Maybe the problem vprintsepi in script code, there is no razbiralsya. - Floy_Monahan commented on June 14th 19 at 18:12
Yes, the classes changed
the code works for a single item as it should - Rusty_Emard85 commented on June 14th 19 at 18:15
Well you have a problem in the code means. For one it works and for few it may not work. For example I see an error with a variable cc. You have it initially set to 1 and then each time you run the script dumaetsya 3 cc = cc + 3; while that first checks to see if (cc < 2) { toist it only once and be executed, because after the first time SS is equal to 5. - Floy_Monahan commented on June 14th 19 at 18:18
Yes exactly this was crab,but I wrote that code once worked but not always
that is, once animated figures - Rusty_Emard85 commented on June 14th 19 at 18:21
Well can another condition to put. For example to check if $(this).html() != '0%'; it does not run the script for this element and the test variable cc to remove all - Floy_Monahan commented on June 14th 19 at 18:24
June 14th 19 at 18:08
Can use classes instead of ID?
not working - Rusty_Emard85 commented on June 14th 19 at 18:11
June 14th 19 at 18:10
using id working with one element, the class with several
not working - Rusty_Emard85 commented on June 14th 19 at 18:13
modified html to the Studio - Floy_Monahan commented on June 14th 19 at 18:16
<div class="wow fadeInLeft col-md-4 box-m">
 <div class="box-n" style="background: #d44132;">
 <h3 data-num="2" class="fun-level">0%</h3><span class="text-nb">After</span>
 <h3 data-num="9" class="fun-level" id="num-n">0%</h3><span class="text-n">Before</span>
</div>
</div>
 <div class="wow fadeInUp col-md-4 box-m ">
 <div class="box-n" style="background: #4fc1e9;">
 <h3 data-num="40" class="fun-level">0%</h3><span class="text-nb">After</span>
 <h3 data-num="18" class="fun-level" id="num-n">0%</h3><span class="text-n">Before</span>
</div>
 </div>
- Rusty_Emard85 commented on June 14th 19 at 18:19
here it's all right
so you have a problem in js code
if (cc < 2) {
 cc = cc + 3; // 1+3 = 4

and to check next
if (4 < 2) { is there not to run - Floy_Monahan commented on June 14th 19 at 18:22

Find more questions by tags HTMLJavaScript