wordpressページ内リンクとカウントアップダウンを同時に行いたい

前提・実現したいこと

現在ワードプレスでサイト制作をしています。再現したい動作ができなくて困っています。お手数ですがお力をお借りしたいです。

ワードプレスの最新記事から順にidを取得して1～+1ずつ増えていく数値に名前を変えたリンクを作成しました。

ページネーションで「＞」ボタンをクリックするとカウントアップします。
「＜」をクリックでカウントダウンします。

最初の数値はカウントは１です。この数値にはwordpressの一番新しい記事のidのリンクが含まれています。

カウントアップダウンする動作と同時にカウントと同じ記事のIDをページ内リンクでその位置に飛びたい。

これを実現したいです。

例）カウントが１で「＞」をクリックするとカウントが2になりidが2の記事に飛びます。id="2" == 最新から2番目の記事

id2の記事に飛んで別ページで表示したいわけではなくて、同じページ内に10～30記事をサムネイル画像をflexで並べていまして、カウントアップすると同時にそれぞれの記事につけた1,2,3と続くidに飛べるようにしたいです。

説明力がないので、動画を撮りました。
こちらをご覧くださいませ！https://www.youtube.com/watch?v=bWiGpH7KaAc

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージはないです。

該当のソースコード

PHP
ソースコード
$page_id = get_posts(array('post_type' => 'post','posts_per_page' => -1,'fields' => 'ids',));
$page_id_num = count($page_id);
for( $i=0; $i < $page_id_num; $i++) {
echo '<a href="#'.$page_id[$i].'">';
echo $i+1;
echo '</a><br>';
}

まずはPHPで最新記事から順にidを取得してfor文で1～+1ずつされるリンクを作成しました。
このリンクをクリックすると、それぞれの記事のところに飛べるので成功です。

<span id="btn10"><?php echo $i+1; ?></span>
ここで現在のカウントを表示しています。

<button id="btn" class="prev" onclick="myFunction()"> ＜ </button>
<button id="btn" class="next" onclick="myFunction1()"> ＞ </button>
このボタンでカウントアップしています。

Javascript
//count
function myFunction1() {
if( count < max ){
count += 1;
document.getElementById("btn10").innerHTML = count;
}else if( count == max){
count = 1;
document.getElementById("btn10").innerHTML = count;
}
}
function myFunction() {
if (count > min ) {
count -= 1;
document.getElementById("btn10").innerHTML = count;
}else if( count == min){
count = max;
document.getElementById("btn10").innerHTML = count;
}
}
button onClickでカウントアップ、ダウンをする関数を実行します。これでカウントアップダウンは実行できているので成功です。