Search the Community

I'm trying to build out a WordPress theme where there is an ACG repeater with nested groups. I want the back-end user to be able to enter an ending value and a label. I then want the numbers to count up from a preset value and end on the value pulled from the ACF number field. This is my feeble but logical attempt (to me). When the loop runs, the number in the first row goes from 100 to the ending value of the last row. All other numbers don't change. This is my code: <?php if( have_rows('counters') ):?> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> <div id="counter-wrap"> <?php while ( have_rows('counters') ) : the_row();?> <?php if( have_rows('single_counter') ):?> <?php while ( have_rows('single_counter') ) : the_row();?> <div class="single_counter"> <div class="single-number"><?php the_sub_field('starting_number');?></div> </div> <?php the_sub_field('label');?> <script> jQuery( document ).ready(function($) { jQuery('.single_counter').each(function() { var Cont={val:'<?php the_sub_field('starting_number');?>'} , NewVal = '<?php the_sub_field('ending_number');?>' ; TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){ $(".single_counter > .single-number")[0].innerHTML=Cont.val }}); }); }); </script> <?php endwhile;?> <?php endif;?> <?php endwhile;?> </div> <?php endif;?> And this is what is output: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> <div id="counter-wrap"> <div class="single_counter"> <div class="single-number">100</div> </div> Likes and comments on instagram alone <script> jQuery( document ).ready(function($) { jQuery('.single_counter').each(function() { var Cont={val:'100'} , NewVal = '300' ; TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){ $(".single_counter > .single-number")[0].innerHTML=Cont.val }}); }); }); </script> <div class="single_counter"> <div class="single-number">0</div> </div> Press Coverage Impressions <script> jQuery( document ).ready(function($) { jQuery('.single_counter').each(function() { var Cont={val:'0'} , NewVal = '9' ; TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){ $(".single_counter > .single-number")[0].innerHTML=Cont.val }}); }); }); </script> <div class="single_counter"> <div class="single-number">0</div> </div> Attendees <script> jQuery( document ).ready(function($) { jQuery('.single_counter').each(function() { var Cont={val:'0'} , NewVal = '4.5' ; TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){ $(".single_counter > .single-number")[0].innerHTML=Cont.val }}); }); }); </script> <div class="single_counter"> <div class="single-number">1000000</div> </div> Beers Distributed During Events <script> jQuery( document ).ready(function($) { jQuery('.single_counter').each(function() { var Cont={val:'1000000'} , NewVal = '1389283' ; TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){ $(".single_counter > .single-number")[0].innerHTML=Cont.val }}); }); }); </script> </div>