Почему в моем коде разбивки на страницы JavaScript отображается количество записей, предшествующих записям на текущей странице?

Я использовал Stack Overflow и другие ресурсы для компиляции ванильного разбиения на страницы JavaScript для создаваемого мной плагина. Пагинация предназначена для элементов DOM, которые динамически создаются через внешний API, а затем печатаются на сайте с помощью PHP в теге «передачи».

Пагинация работает нормально (я использовал функцию array.from для создания массива всех элементов, созданных с помощью упомянутого выше тега), однако есть один небольшой нюанс, который действительно ошеломляет меня: код, кажется, отображает количество записей которые существуют до тех, что находятся на текущей странице.

Например, если я нахожусь на первой странице, отображается «0» (нет записей до страницы 1), если я нахожусь на второй странице, отображается «5» (у меня он настроен на отображение 5 записей на странице), третья страница "10" и так далее.

Я уверен, что это связано с этим JavaScript, поскольку, когда я удаляю его вызов, номер исчезает.

Вот мой код:

var $table = document.getElementById("recents"),
$n = 5,
$rows = Array.from(document.getElementsByTagName("transfer")),
$rowCount = $rows.length,
$tr = [],
$i,$ii,$j = 0;
var $pageCount = Math.ceil($rowCount / $n);
if ($pageCount > 1) {
    for ($i = $j,$ii = 0; $i < $rowCount; $i++, $ii++)
       $tr[$ii] = $rows[$i].outerHTML;
    $table.insertAdjacentHTML("afterend","<div id='buttons'></div");
    sort(1);
}
function sort($p) {
    var $rows = $s = (($n * $p)-$n);
    for ($i = $s; $i < ($s+$n) && $i < $tr.length; $i++)
        $rows += $tr[$i];
    $table.innerHTML = $rows;
    document.getElementById("buttons").innerHTML = pageButtons($pageCount,$p);
    document.getElementById("id"+$p).setAttribute("class","active btn btn-secondary");
}
function pageButtons($pCount,$cur) {
    var $prevDis = ($cur == 1)?"disabled":"",
        $nextDis = ($cur == $pCount)?"disabled":"",
        $buttons ='<div class = "row w-100 mx-auto my-4">';
        $buttons += '<div class = "btn-group mx-auto" role = "group">';
        $buttons += "<button type='button' value='&lt;&lt; Prev' class='btn btn-secondary'  onclick='sort("+($cur - 1)+")' "+$prevDis+">&lt;&lt; Prev</button>";
    for ($i=1; $i<=$pCount;$i++)
        $buttons += "<button type='button' id='id"+$i+"'value='"+$i+"' class='btn btn-secondary'  onclick='sort("+$i+")'>"+$i+"</button>";;
        $buttons += "<button type='button' value='Next &gt;&gt;' class='btn btn-secondary' onclick='sort("+($cur + 1)+")' "+$nextDis+">Next &gt;&gt;</button>";
        $buttons += '</div>';
        $buttons += '</div>';
    return $buttons;
}

Ожидаемые результаты - это разбитый на страницы список переводов, напечатанных в элементе с идентификатором «недавние», и список интерактивных кнопок для следующих страниц, но я также получаю количество записей, предшествующих записям на текущей странице.