Internal link outputted via custom field and regex not working

What I am doing:
I am outputting the navigation by taking the title, running it through a regular expression, and putting it into the a href. I then use a function that allows you to pass the specific row you want to call, get the title of that row, run it through the regular expression and output it as the section ID

My Problem:
For some reason when doing this, all of the internal anchors only go to the first item. If I hardcode the anchors and ids with something generic (#section-1) it then works. Obviously I have checked the console and they do match up.

I am kind of blown away by this, as it does not make sense why it is not working. It is simply matching the internal link with the ID of an item on the page (which I have done). Is there something where the DOM doesn’t register the outputted values because it is happening out of sync on load?

How I output the internal navigation

<?php
  $product_counter = 1;
  if( have_rows('product_navigation') ): while( have_rows('product_navigation') ): the_row();
  $link = get_sub_field('product_name');
  $link = preg_replace('/[s-]+/', '-', $link);
  $link = strtolower($link);
?>

<li id="<?php echo $link; ?>" class="animated fade-in-up">
    <a href="<?php echo '#' . $link; ?>">
         <!-- link stuff inside here -->
    </a>
</li>

<?php
  $product_counter++;
  endwhile; endif;
?>

Function I use for the sections of the page.

<?php
  function call_section_row($row_int) {
    $rows = get_field('product_navigation');
    $row_number = $rows[$row_int];
    $link = $row_number['product_name'];

    $link = preg_replace('/[s-]+/', '-', $link);
    $link = strtolower($link);

    echo $link;
  }
?>

How I output the function containing the internal link for each section

<section id="<?php call_section_row(1); ?>" class="portfolio-planning">
   <!-- section stuff inside here -->
</section>