Add a dynamic counter number inside ancher tag

Question

I have some code here that outputs the following:

Essentially I want to use same page anchor tags so a user can click on the small logo and be taken to the larger logo and info.

As it's a Wordpress site, I have used the ACF repeater field to achieve this. This repeater field enables the user in the back end to add more clients, for each client they can add an image a company name and the paragraph text.

Then I have just repeated the repeater field above and shown only the images but made them much smaller.

As you will see in the code below, I have assigned <a href="#anchor1"></a> around each smaller photo and then this: <a name="anchor1"></a> just above every larger photo..

But I need a way of the numbers counting up so when they come out they aren't all anchor1 they become anchor2, anchor3 and so on.

Any ideas?

<div class="container client-page-logos-small" >
<div class="row">

  <h3>Click company to see more</h3>

  <?php if( have_rows('client_page_logos', 123456) ): ?>

  <ul class="client-page-logos-small">

  <?php while( have_rows('client_page_logos', 123456) ): the_row(); 

    // vars
    $logo = get_sub_field('client_page_logo');

    ?>

    <a href="#anchor1">
      <li class="client-page-logos-small">
          <img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
      </li>
    </a>

  <?php endwhile; ?>

  </ul>

  <div style="clear: both;"></div>

  <?php endif; ?>

  <hr>

</div>
</div>




<div class="container client-page-logos" >
<div class="row">

  <?php if( have_rows('client_page_logos', 123456) ): ?>

  <ul class="client-page-logos">

  <?php while( have_rows('client_page_logos', 123456) ): the_row(); 

    // vars
    $logo = get_sub_field('client_page_logo');
    $name = get_sub_field('client_name');
    $text = get_sub_field('client_text');

    ?>

    <li class="client-page-logos">
        <a name="anchor1"></a>
        <img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
        <h3><?php echo $name; ?></h3>
        <p><?php echo $text; ?></p>
    </li>

  <?php endwhile; ?>

  </ul>

  <?php endif; ?>

</div>
</div>

Answer 1

You need to add counter like below:-

<?php 
  $i = 1;
  while( have_rows('client_page_logos', 123456) ): the_row(); 
  // vars
  $logo = get_sub_field('client_page_logo');
?>

<a href="#anchor<?php echo $i;?>">
    <li class="client-page-logos-small">
        <img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
    </li>
</a>

<?php $i++;endwhile; ?>

And

<?php

  $j = 1;
  while( have_rows('client_page_logos', 123456) ): the_row(); 

  // vars
  $logo = get_sub_field('client_page_logo');
  $name = get_sub_field('client_name');
  $text = get_sub_field('client_text');
?>

<li class="client-page-logos">
    <a name="anchor<?php echo $j;?>"></a>
    <img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt'] ?>" />
    <h3><?php echo $name; ?></h3>
    <p><?php echo $text; ?></p>
</li>

  <?php $j++ ;endwhile; ?>