Create unique id for each repeater field - php

Question

I need to echo a unique id for every product box on the page as they have a modal window for each.
I know how to echo a unique id for each repeater field in a loop.
BUT.. I have a repeater within a repeater. So its just restarting the loop for each repeater field and i'm just getting the same numbers.
See the below image. (it should be going to 8) but its starting the loop again and so only reaching 4.
Here is my code:
<div class="container">
<?php while( have_rows('product_sections') ): the_row();
$intro = get_sub_field('section_intro');
$logo = get_sub_field('section_logo');
?>
<div class="sector-heading">
<img src="<?php echo $logo; ?>">
<div><?php echo $intro; ?></div>
</div>
<?php if( have_rows('products') ): ?>
<?php $counter = 1; //this sets up the counter starting at 0 ?>
<div class="grid-wrapper">
<?php while( have_rows('products') ): the_row();
$id = get_sub_field('id');
$name = get_sub_field('product_name');
$thumbnail = get_sub_field('thumbnail');
$size = get_sub_field('product_size');
$description = get_sub_field('product_description');
$stockist = get_sub_field('stockist_link');
$literature = get_sub_field('literature_link');
?>
<!--Start Single Product-->
<div class="grid-item">
<div class="image-hovers">
<img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>"/>
<a class="js-open-modal" href="#" data-modal-id="<?php echo $id; ?>"><div class="product-hover"></div></a>
</div>
<div class="grid-title">
<h2><?php echo $counter; // Prints the number of counted row ?>
</h2>
</div>
</div>
<!--Start Single Product Modal-->
<div id="<?php echo $id; ?>" class="modal-box">
×
<div class="modal-wrap">
<div class="modal-img">
<img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>" />
</div>
<div class="modal-content">
<h2><?php echo $name; ?></h2>
<p><strong><?php echo $size; ?></strong></p>
<hr>
<?php echo $description; ?>
<br>
<?php if( $stockist ): ?>
<div class="modal-stockist">Find a Stockist</div>
<?php endif; ?>
<?php if( $literature ): ?>
<div class="modal-literature">Literature</div>
<?php endif; ?>
<br></br>
</div>
</div>
</div>
<!--Close Single Product Modal-->
<?php $counter++; // add one per row ?>
<?php endwhile; // end of the loop. ?>
</div>
<!--End Grid Wrapper-->
<?php endif; ?>
<!-- Close product repeater field -->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Container-->

Answer 1

think like computer while you do the coding
in nested loop try to give id's to the items as nested
so change your nested modal starting line to
in your case you are using $counter for every product listing.
use it for every row or line of products.
for that move the $counter = 1; line before the start of first while loop.
<div id="<?php echo $id; ?>" class="modal-box">
to
<div id="<?php echo $counter.$id; ?>" class="modal-box">
as $counter tells which row and $id tells which product and they both tells the specific product from any row. it will be unique then...
don't forget to append $counter with $id where you are initializing the js for the modal