What makes this use of jScroll in a Laravel 8 application fail?

I am working on a blogging application in Laravel 8.

The ArticlesController controller I have this method to display the single article and its comments:

class ArticlesController extends FrontendController {

    // More code

    public function show($slug) {
        // Single article
        $article = Article::firstWhere('slug', $slug);
        $old_article = Article::where('id', '<', $article->id)->orderBy('id', 'DESC')->first();
        $new_article = Article::where('id', '>', $article->id)->orderBy('id', 'ASC')->first();

        // Comments
        $commentsQuery = Comment::where(['article_id' => $article->id, 'approved' => 1])->orderBy('id', 'desc');
        $comments = $commentsQuery->paginate(10);
        $comments_count = $commentsQuery->count();

        return view('themes/' . $this->theme_directory . '/templates/single', 
            array_merge($this->data, [
                'categories' => $this->article_categories,
                'article' => $article,
                'old_article' => $old_article,
                'new_article' => $new_article,
                'comments' => $comments,
                'comments_count' => $comments_count,
                'tagline' => $article->title,
                ])
            );
    }

}

In the view I have this for the comments list:

<div id="commentsList">
  <ol class="commentlist">
    @foreach ($comments as $comment)
    <li class="depth-1 comment">
      <div class="comment__avatar">
        <img class="avatar" src="" alt="" width="50" height="50">
      </div>
      <div class="comment__content">
        <div class="comment__info">
          <div class="comment__author"> </div>
          <div class="comment__meta">
            <div class="comment__time"></div>
            <div class="comment__reply">
              <a class="comment-reply-link" href="#0">Reply</a>
            </div>
          </div>
        </div>
        <div class="comment__text">
          <p></p>
        </div>
      </div>
    </li>
    @endforeach
  </ol>

  
</div>

The goal

I want to replace the comments pagination with an "infinite scroll", with the help of jScroll.

For this purpose, I have:

$('#commentsList nav').hide();
$(function() {
    $('#commentsList').jscroll({
        autoTrigger: true,
        loadingHtml: '<span>Loading...</span>',
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: '.commentlist > li',
        callback: function() {
            $('#commentsList nav').remove();
        }
    });
});

The problem

The code above should append the <li class="depth-1 comment"></li> elements to the <ol class="commentlist"><ol> but instead it does the folowing:

• wraps the loaded list items in a <div class="jscroll-added"></div>
• puts the <div class="jscroll-added"></div> element below the comments list instead of inside it.

Questions

1. What causes this bug?
2. What is the easiest fix?

from What makes this use of jScroll in a Laravel 8 application fail?