ACF repeater field not opening modal when inserting counter - php

Question

Tried several approaches but none of them work and can´t figure out what else to do. As part of a team page I have a repeater field with 4 subfields —image, title(caption),link(to trigger modal) and details(modal text content)— where some should open a modal with extra info when clicked. The modal works fine but when I try to insert a counter in the code to open the corresponding subfield for each team member, it stops working and nothing opens.
Here´s the bit of code. Any help is much appreciated.
<div class="team-block w4 clear" >
<?php
if( have_rows('team_member') ):
$counter = 1;
?>
<ul>
<?php
while( have_rows('team_member') ): the_row();
// vars
$image = get_sub_field('team_member_image');
$title = get_sub_field('team_member_title');
$link = get_sub_field('link_to_details');
$details = get_sub_field('team_member_details');
?>
<li class="team-member-box">
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img class="team-member-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<?php
echo $title;
if( $link ):
?>
</a>
<?php
endif;
if( $link ):
?>
<div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p><?php echo $details; ?></p>
</div>
<?php endif; ?>
</li>
<?php
$counter++;
endwhile;
?>
</ul>
<?php endif; ?>
</div>

Answer 1

Check this out:
Modal №1
Modal №2
Modal №3
<div class="remodal team-member-details" data-remodal-id="modal1">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah</p>
</div>
<div class="remodal team-member-details" data-remodal-id="modal2">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah 2</p>
</div>
<div class="remodal team-member-details" data-remodal-id="modal3">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p>yeah 3</p>
</div>
This works as expected. When I look at your code, I assume that the click on the image shoukd trigger the modal, right? I so, try this:
<div class="team-block w4 clear" >
<?php if( have_rows('team_member') ): ?>
<?php $counter = 1; ?>
<ul>
<?php while( have_rows('team_member') ): the_row();
// vars
$image = get_sub_field('team_member_image');
$title = get_sub_field('team_member_title');
$link = get_sub_field('link_to_details');
$details = get_sub_field('team_member_details');
?>
<li class="team-member-box">
<a href="modal<?php echo $counter;?>">
<img class="team-member-image" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<?php echo $title; ?>
</a>
<?php if( $link ): ?>
<div class="remodal team-member-details" data-remodal-id="modal<?php echo $counter;?>">
<button data-remodal-action="close" class="remodal-close"></button>
<h3>Qualifications</h3>
<p><?php echo $details; ?></p>
</div>
<?php endif; ?>
</li>
<?php $counter++; ?>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
I am not sure if this is right (dunno what to do with the $link var) but this should work.