Бесконечная прокрутка работает, но не заполняет все данные из-за вызова javascript

на моем сайте я хочу показать рейтинги пользователей, для этого я использовал бесконечную прокрутку, но я столкнулся с одной проблемой.
когда он сначала загружает данные до вызова <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> он показывает звезду с подсчетом голосов, но когда после вызова <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> он не показывает звезду.
мой views.py

@login_required
def ratings_user(request,pk):
    ratings = VoteUser.objects.filter(the_user_id=pk).order_by('-pk')
    paginator = Paginator(ratings, 1)
    page = request.GET.get('page')
    try:
        posts = paginator.page(page)
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:

        posts = paginator.page(paginator.num_pages)
    return render(request,request.session['is_mobile']+'profile/ratings.html',{'ratings':posts})

html

{% extends 'mobile/profile/base.html' %}
{% block title %}
Ratings
{% endblock %}

{% block leftcontent %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
{% endblock %}
{% block middlecontent %}
 <div class="infinite-container">

{% for i in ratings %}
 <div class="infinite-item">
     
<div class="w3-container w3-card w3-white w3-round w3-margin">
    <img src="{{ i.the_user.profile.avatar.url }}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:40px;height:40px;border-radius:50%;">

        <a href ="{% url 'profile' i.the_user_id %}" style="color:black;">{% with user=i.the_user.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
        <br>

       <span class="stars" data-rating="{{ i.vote.vote }}" data-num-stars="5" ></span>
        <hr class="w3-clear">
        <p>
        {{ i.commentaire|linebreaksbr }}
        </p>
        <span class="glyphicon glyphicon-user"></span> <a href ="{% url 'profile' i.the_sender_id %}">{% with user=i.the_sender.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
</div>
</div>
{% endfor %}
</div>
   {% if ratings.has_next %}
    <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a>
  {% endif %}
{% endblock %}
{% block rightcontent %}

{% endblock %}
{% block js %}
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0]
    });
  </script>
<script>
//ES5
$.fn.stars = function() {
    return $(this).each(function() {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
        var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
        $(this).html(fullStar + halfStar + noStar);
    });
}

//ES6
$.fn.stars = function() {
    return $(this).each(function() {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
        const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}
</script>
<script>
            $(function(){
                $('.stars').stars();
            });
        </script>
{% endblock %}

я пытался поместить <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> внутри class="infinite-item" но это не помогает. в чем может быть причина? Спасибо.Со вчерашнего дня я занимаюсь этим вопросом и перепробовал все.Это другой пользователь, который пытался помочь мне здесь https://stackoverflow.com/a/69930878/15042684 но я не очень понял, не могли бы вы помочь мне понять это с некоторым кодом.
вот его ответ It doesn't look like .stars() will look for new elements being added to the DOM. You should look for a callback function configuration option within Waypoint.Infinite that you can call .stars() on the new elements.

Предполагая, что вы используете бесконечную прокрутку waypoint'а , вы можете использовать onAfterPageLoad обратный вызов

onAfterPageLoad

По умолчанию: $.noop.

Параметры: $items.

Это обратный вызов, который срабатывает в конце цикла запроса, после добавления новых элементов в контейнер. Ему передается один параметр, который является jQuery-объектом всех элементов, которые были добавлены во время загрузки страницы.

.

Обратите внимание, что, несмотря на использование соглашения jquery: $name указывает на объект jquery и утверждает является объектом jquery, в данном случае метод проб и ошибок показывает, что $items - это элементы DOM, а не объект jquery.

В документации нет примера, поэтому вероятно будет выглядеть примерно так:

  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onAfterPageLoad: function(items) {
          $(items).find(".stars").stars();
      } 
    });
  </script>
Вернуться на верх