ACF iterating past the while-loop, defining a max number to loop

Question

Using the ACF Repeater field I am trying to show a rating, using empty and filled circles. It is a * out of 5 kind of rating.

My desire is to have the repeater field fill in the circles by iterating a class name like so:

<?php for($i=1; $i<=get_sub_field('rating'); $i+=1)
    if( $i <= get_sub_field('rating') ) {
        echo '<li class="graph empty ' . 'fill-' . $i . '"></li>';
    } else {
        echo '<li class="graph empty"></li>'; 
    } 
?>

In essence, if I tell the repeater to fill 3 circles, then the PHP should evaluate to this HTML:

<li class="graph empty fill-1"></li>
<li class="graph empty fill-2"></li>
<li class="graph empty fill-3"></li>
<li class="graph empty"></li>
<li class="graph empty"></li>

The actual result is:

<li class="graph empty fill-1"></li>
<li class="graph empty fill-2"></li>
<li class="graph empty fill-3"></li>

Which makes sense, since the database only has 3 values, and I am telling it to loop over the total number of values. I just can't figure out how to have it iterate the class while it finds values, then drop the class fill- until it gets to the limit of 5.

In sudo code, I want to be able to tell the while loop:

//while there are the_rows()
  //iterate the class name "fill-"
//once you have found all the rows
  //only insert the class name "graph empty" until 5 is reached

Here is my HTML and PHP:

<?php if( have_rows('program_skills') ) : 
    while( have_rows('program_skills') ) : the_row(); ?>

        <div class="skills-wrapper">
            <div class="col-xs-6">
                <p><?php the_sub_field('heading'); ?></p>
            </div>
            <div class="col-xs-6">
                <div class="skills-graph">
                    <ul>
                        <?php for($i=1; $i<=get_sub_field('rating'); $i+=1)
                            if( $i <= get_sub_field('rating') ) {
                                echo '<li class="graph empty ' . 'fill-' . $i . '"></li>';
                            } else {
                                echo '<li class="graph empty"></li>'; //Attempt to display graph empty for the remaining li's until the count = 5.
                            } 
                        ?>
                    </ul>
                </div>
            </div>
        </div>

    <?php endwhile;

endif;?>

I'm really stuck on this and thank you for any help you're able to give. Please ask any questions for further clarification, I'd be glad to answer them.

Answer 1

If I compare the counter to five instead of the input (****), then it evaluates perfectly. Thanks to Milo for the help.

<?php if( have_rows('program_skills') ) : 
    while( have_rows('program_skills') ) : the_row(); ?>

        <div class="skills-wrapper">
            <div class="col-xs-6">
                <p><?php the_sub_field('heading'); ?></p>
            </div>
            <div class="col-xs-6">
                <div class="skills-graph">
                    <ul>
                        ****<?php for($i=1; $i<=5; $i+=1)
                            if( $i <= get_sub_field('rating') ) {
                                echo '<li class="graph empty ' . 'fill-' . $i . '"></li>';
                            } else {
                                echo '<li class="graph empty"></li>'; 
                            } 
                         ?>
                    </ul>
                </div>
            </div>
        </div>

    <?php endwhile;
endif;?>