php - Videos not appearing on second day

I created a site for friend which has day tabs with videos inside. But due to some error, when clicking on second day, no video appears.

<div class="tab-content video" id="content-tabvideo">
<?php $i=0; if(have_rows('list_of_days')): ?> 
    <div class="tabs-buttons">
        <?php while(have_rows('list_of_days')): the_row(); $i++; ?> 
            <div class="day-button" id="single_day_<?php echo $i; ?>"> 
                <?php echo get_sub_field('single_day_name'); ?> 
            </div>
        <?php endwhile; ?>                
    </div> 
                    <div class="tab-content list_of_videos">
            <?php $i=0; while(have_rows('list_of_days')): the_row(); $i++; ?> 
                <div class="videos-of-the-day" id="single_day_video_<?php echo $i; ?>">
                            <?php if(have_rows('this_days_video_list')): while(have_rows('this_days_video_list')): the_row(); ?> 
                                <iframe class="single-video" src="<?php echo get_sub_field('day_video_url'); ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            <?php endwhile; endif; ?> 
        </div>
        <?php endwhile; ?> 
        </div>
<?php endif; ?> 
Copy code

Also jquery rotation was made by friend to make rotation possible:

    jQuery('.tab-button').on('click', function(){
    if(jQuery(this).hasClass('active')) {
        
    } else {
        jQuery(this).siblings().removeClass('active');
        jQuery(this).addClass('active');
        
        var targetidi = jQuery(this).attr('id');
        jQuery('#content-'+targetidi).fadeIn(500);
        jQuery('#content-'+targetidi).siblings('.tab-content').fadeOut(500);
}
});

jQuery('.day-button:first-child, .videos-of-the-day:first-child').addClass('active'); 
jQuery('.day-button').on('click', function(){
    var dayid = jQuery(this).attr('id');
    var daycore = 'single_day_';
    var indexid = dayid.split(daycore).pop();

    if(jQuery(this).hasClass('active')) {
        
    } else {
        jQuery(this).siblings().removeClass('active');
        jQuery(this).addClass('active');
        
        
        jQuery('#single_day_video_'+indexid).fadeIn(500);
        jQuery('#single_day_video_'+indexid).siblings().fadeOut(500);
   }
});
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.