Nested Tabs with Repeater - Advance Custom Fields Wordpress - php

Question

I want to make some tabs with Wordpress Using the Advance Custom Field Plug-in with the Repeater Add-On.
This is my actual code:
<?php
if( have_rows('menu_sections') ): ?>
<ul class="nav nav-tabs" id="" role="tablist">
<?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
<?php
$string = sanitize_title( get_sub_field('section_title') );
?>
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>
<?php $i++; endwhile; ?>
</ul>
<div class="tab-content">
<?php $i=0; while ( have_rows('menu_sections') ) : the_row(); ?>
<?php
$string = sanitize_title( get_sub_field('section_title') );
?>
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
<?php
while (have_rows('section_items')) {
the_row();
// Display each item as a list
?>
<ul>
<li class="list-unstyled"><?php the_sub_field('dish_name'); ?></li>
<li class="list-unstyled"><?php the_sub_field('dish_description'); ?></li>
<li class="list-unstyled"><?php the_sub_field('dish_price'); ?></li>
</ul>
<?php
} // end while have rows section_items
?>
</div>
<?php $i++; endwhile; ?>
</div>
<?php endif; ?>
This Actual code displays this:
Now if i select another tab it won't change the card info as you can see in the next image:
Im using a Bootstrap Tabs with a CDN
This is what the Gooogle console display:
So I tried many different ways but no success at all.
I do know how to make them without a nested repeater, and with this case I don't know why it dosen't work. I read some other posts but no having much success either. So I think that if it dosen't show is something with css??
I will appreaciate the help.
Regards!

Answer 1

Try changing
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab"><?php the_sub_field('section_title'); ?></a>
</li>
to
<li role="presentation" <?php if ($i==0) { ?>class="active"<?php } ?> >
<a role="tab" data-toggle="tab" href="#tab-<?php echo $i; ?>"><?php the_sub_field('section_title'); ?></a>
</li>
and
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="<?php echo $string; ?>">
to
<div role="tabpanel" class="tab-pane text-left fade <?php if ($i==0) { ?>in active<?php } ?>" id="tab-<?php echo $i; ?>">
I hope it will solve the issue. You are assigning a section title as id to tab-pane, which might contain space as well. It's always recommended to use id without spaces.