Subscript in PHP and Loops

I am using ACF and PHP to create a WordPress website currently working through basically a loop and looking to connect a subscript and a tag by an ID that needs to have a counter increment on it so that the ID can change from #footnote-top-1 to #footnote-top-2, #footnote-top-3, etc and have the link also change. , . If so how?

Preference to using PHP or CSS.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis felis ante, maximus semper malesuada vel, bibendum iaculis urna. Fusce bibendum, quam eget mollis euismod, nisl ipsum dapibus nibh, eget ultricies velit ipsum in ex. Nulla pulvinar consequat suscipit. Phasellus a bibendum nulla. Integer convallis ornare dictum. Quisque sed congue metus, ac tincidunt ex. Nulla libero nulla, aliquet vitae risus eu <sup class="footnote" id="footnot-top-1"><a href="#footnohte-bottom-1">1</a></sup> , rhoncus interdum ex. Vestibulum nisi nisl, sollicitudin tincidunt malesuada ut, blandit eu mi. Nam nec aliquet ante.

<div id="footnotes" class="footnotes">
<?php if ( have_rows( 'footnotes' ) ) : ?>
    <?php while ( have_rows( 'footnotes' ) ) : the_row(); ?>
        <?php if ( have_rows( 'footnotes_group' ) ) : ?>
            <ol>
            <?php while ( have_rows( 'footnotes_group' ) ) : the_row(); ?>
                <li id="footnote-bottom-1">
                    <?php the_sub_field( 'footnotes_reference' ); ?>
                <a href="#footnote-top-1">
                    <span class="screen-reader-text"><?php the_sub_field( 'footnotes_to_number' ); ?></span>
                    <?php the_sub_field( 'footnotes_to_top' ); ?>
                </a>
                </li>
            <?php endwhile; ?>
            </ol>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>
    <?php endwhile; ?>
<?php else : ?>
    <?php // no rows found ?>
<?php endif; ?>
</div>

Answer

    <div id='footnotes' class='footnotes'>
<?php if ( have_rows( 'footnotes' ) ) : ?>
<?php 
    //initialize $i with a default value of 1
    $i = 1;
    while ( have_rows( 'footnotes' ) ) : the_row(); ?>
    <?php if ( have_rows( 'footnotes_group' ) ) : ?>
        <ol>
        <?php while ( have_rows( 'footnotes_group' ) ) : the_row(); ?>
            <li id="footnote-bottom-1">
                <?php the_sub_field( 'footnotes_reference' ); ?>
            <a href="#footnote-top-<?php echo $i; //echo the current value of $i ?>">
                <span class="screen-reader-text"><?php the_sub_field( 'footnotes_to_number' ); ?></span>
                <?php the_sub_field( 'footnotes_to_top' ); ?>
            </a>
            </li>
        <?php 
    //increment $i by one each time through the loop
    $i++; endwhile; //have_rows( 'footnotes_group' ) ?>
        </ol>
    <?php else : ?>
        <?php // no rows found ?>
    <?php endif; ?>
    <?php 
    endwhile; //while ( have_rows( 'footnotes' ) ) ?>
    <?php else : ?>
        <?php // no rows found ?>
    <?php endif; ?>
</div>