count up the rows in acf (repeater-field) and add html output for every row - advanced-custom-fields

Question

I want to output a list element () for each row of an ACF repeater field. As soon as a new row is created, a new list element shoul be created with the value of the counter (cout up).
here is the code. the list elements should cout up according to the number of rows:
HTML:
<ul>
<li data-id="1" class="active">1</li>
<li data-id="2">2</li>
<li data-id="3">3</li>
<li data-id="4">4</li>
<li data-id="5">5</li>
<li data-id="6">6</li>
<li data-id="7">7</li>
<li data-id="...">...</li>
</ul>
PHP (ACF):
<?php
$i = 1;
if (have_rows('referenz-slide')) :
$counter = 0;
while (have_rows('referenz-slide')) : the_row();
$counter++;
// vars
$title = get_sub_field('title');
$link = get_sub_field('link');
$text = get_sub_field('text');
?>
<?php $state = "";
if ($i == 1) {
$state = "active";
} else {
$state = "hidden";
} ?>
<div class="referenz-content <?php echo $state; ?>" id="ref-<?php echo $i; ?>" data-referenz="<?php echo $i; ?>">
<h4 class="referenz-headline"><?php echo $title; ?></h4>
<p><?php echo $text; ?></p>
Jetzt mehr erfahren
</div>
<?php $i++;
endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
I would like to increment the list items and the value of the data id (html output) according to the number of ACF rows. Can someone help?

Answer 1

So you pretty much have it all there already
<ul>
<?php while (have_rows('referenz-slide')) : the_row();?>
<li data-id="<?php echo $i;?>" class="<?php echo $state; ?>">
<?php echo $i;?>
</li>
<?php $i++; ?>
<?php endwhile; ?>
</ul>