Tabs using ACF repeater plugin

I am using ACF Repeater plugin for display content using tabs, But tabs not working fine here is my code

<ul class="nav nav-tabs course-detail-tabs">
<?php                            
if( have_rows('test-course') ): $i = 0;
while ( have_rows('test-course') ) : the_row(); $i++;
?>                               
<li class="<?php if($i == 1){echo "active";}?>"><a href="tab<?php echo $i; ?>" data-toggle="tab"><?php the_sub_field('tname'); ?></a></li>
<?php
endwhile;
endif;                           
?>  
</ul>
<div class="tab-content course-tab-content">
<?php                            
if( have_rows('test-course') ): $i = 0;
while ( have_rows('test-course') ) : the_row(); $i++;
?>                               
<div class="tab-pane fade <?php if($i == 1){echo "active in";}?>" id="tab<?php echo $i; ?>">
<section class="course-schedule">
<?php the_sub_field('timg'); ?>
</section>
</div>
<?php
endwhile;
endif;                           
?>                                 
</div>

Anyone help me how to achieve this, Any suggestion would be appreciated Thanks In advance.

via Chebli Mohamed