get_row_index() not returning to script in loop

• digi57

• March 31, 2018 at 4:53 am

I’m trying to run a JS function for each repeater row. To do this, I figured I’d use et_row_index() to target each row. The function uses GSAP to animate a counter based on values input via ACF. My problem is the first loops row index (1) is repeated for each row even though each row is printing the row index properly and appending the correct element’s ID.

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>

	<ul id="counter-wrap">
		<?php while ( have_rows('counters') ) : the_row();?>	
			<li class="single_counter" id="single-number-wrap-<?php echo get_row_index(); ?>">		
			<?php if( have_rows('single_counter') ):?>
				<?php while ( have_rows('single_counter') ) : the_row();?>	
						<?php if(get_sub_field('prepend')):?>				
						<span><?php the_sub_field('prepend');?></span>
						<?php endif;?>
						<span id="single-number-<?php echo get_row_index(); ?>"><?php the_sub_field('starting_number');?></span>
						<?php if(get_sub_field('append')):?>				
						<span><?php the_sub_field('append');?></span>
						<?php endif;?>	
						<div><?php the_sub_field('label');?></div>	
												
<script>
jQuery( document ).ready(function($) {	
		var Cont={val:'<?php the_sub_field('starting_number');?>'} , NewVal = '<?php the_sub_field('ending_number');?>' ;
		var counter = $('#single-number-<?php echo get_row_index(); ?>')
		TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){
		  jQuery(counter)[0].innerHTML=Cont.val
		}});
});	
</script>	
							
				<?php endwhile;?>
			<?php endif;?>	
			</li>			
		<?php endwhile;?>
	</ul>
<?php endif;?>	

And this is what is outputs:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js”></script&gt;

<ul id=”counter-wrap”>

<li class=”single_counter” id=”single-number-wrap-1″>

<span id=”single-number-1″>100</span>

<span>M</span>

<div>Likes and comments on instagram alone</div>

<script>
jQuery( document ).ready(function($) {
var Cont={val:’100′} , NewVal = ‘300’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>

<li class=”single_counter” id=”single-number-wrap-2″>

<span id=”single-number-1″>0</span>

<span>M</span>

<div>Press Coverage Impressions</div>

<script>
jQuery( document ).ready(function($) {
var Cont={val:’0′} , NewVal = ‘9’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>

<li class=”single_counter” id=”single-number-wrap-3″>

<span id=”single-number-1″>0</span>

<span>K</span>

<div>Attendees</div>

<script>
jQuery( document ).ready(function($) {
var Cont={val:’0′} , NewVal = ‘4.5’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>

<li class=”single_counter” id=”single-number-wrap-4″>

<span id=”single-number-1″>1000000</span>

<div>Beers Distributed During Events</div>

<script>
jQuery( document ).ready(function($) {
var Cont={val:’1000000′} , NewVal = ‘1389283’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>

<li class=”single_counter” id=”single-number-wrap-5″>

<span>$</span>
<span id=”single-number-1″>1000</span>

<div>Paper Count</div>

<script>
jQuery( document ).ready(function($) {
var Cont={val:’1000′} , NewVal = ‘2000’ ;
var counter = $(‘#single-number-1’)
TweenMax.to(Cont,3,{val:NewVal,roundProps:”val”,onUpdate:function(){
jQuery(counter)[0].innerHTML=Cont.val
}});
});
</script>