Incrémenter une variable dans un tableau

Bonjour à tous,

OK, je sais, vu le titre, vous allez me dire de chercher sur notre ami Google pour une question aussi simple xD

En fait, j'ai déjà cherché mais je n'arrive pas à trouver de réponse pour mon cas bien précis.
Au niveau de ma vue, j'ai une liste de vidéos classées en fonction du nombre de points décroissants, le tout affiché dans un beau tableau ^^. Sur la première colonne du tableau, j'affiche la position au classement de chaque vidéo.
Pour résumé, j'ai ceci :

Position ------- Nom de la vidéo ------ Points
1                     xxxxxx            21315
2                    xxxxxx         21314
...

Tout ça c'est bien mais si on commence à avoir 200 vidéos de listés, autant mettre une pagination. Et c'est là que commence le problème...
Je souhaite mettre, à la place d'une pagination, un infiniteScroll.
Le problème, c'est que je ne vois pas comment mettre à jour le chiffre de la position vu qu'il fait partie intégrante des données que je récupère en ajax.

Voici le code de ma vue concernée :

<table class="table table-center">
    <thead>
        <tr>
            <th>Position</th>
            <th>Nom</th>
            <th>Points</th>
            <th>Écouter</th>
        </tr>
    </thead>
    <tbody id="infiniteScroll">
        <?php $rang = 1; ?>
        <?php foreach ($musics as $music): ?>
            <tr id="tune-<?= $music['Music']['id']; ?>">
            <td class="range"><?= $rang++; ?></td>
            <td><?= $music['Music']['name']; ?></td>
            <td><?= $music['Music']['points']; ?></td>                          
            <td><a href="#" data-url="<?= $this->Html->url(array('controller' => 'musics', 'action' => 'play', $music['Music']['id'])); ?>" class="play"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></a></td>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>

Et le code js pour récupérer les données en ajax :

    $(window).scroll(function(){
        if( ( $(window).scrollTop() == $(document).height() - $(window).height() ) && busy === false ){     
            i++;
            busy = true;
            // $loader.show();
            $.get(document.location.href + '/page/' + i)
                .done( function(data){
                    var $data = $(data);
                    $content = $data.find('#infiniteScroll').html();
                    $('#infiniteScroll').append($content);                  
                    busy = false;
                    // $loader.hide();
                })
                .fail(function(){
                    // $loader.hide();
                });
        }
    });

Avez-vous une idée de la marche à suivre ?
Merci d'avance ;)