【html＋javascript】複数ボタンに対して、ボタンの順番に応じた内容を表示する。

Question

前提・実現したいこと

ボタンが複数あり、
どれか一つのボタンを押すと、
そのボタンに応じた内容を表示する。

例えば、1番目をクリックすると、1番目の内容を表示
2番目をクリックすると、２番目を表示といった感じです。

ワードプレスでの実装を想定しているので、
そのような書き方にしています。

何か良い方法はあるのでしょうか？」

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

色々探したが、書き方が分からない。

該当のソースコード

<div class="testbox">
　<ul>
　　<li><a href="#">1番目クリック</a></li>
　　<li><a href="#">２番目クリック</a></li>
　　<li><a href="#">３番目クリック</a></li>
　　<li><a href="#">４番目クリック</a></li>
　</ul>
</div>

<div class="readBox">
　<ul>
　　<li><p>一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容一番目の内容</p></li>
　　<li><p>二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容二番目の内容</p></li>
　　<li><p>３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容３番目の内容</p></li>
　　<li><p>４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容４番目の内容</p></li>
　</ul>
</div>

該当のソースコード

jQuery(function($){
　const butons = document.querySelectorAll('.testbox li a');
　const readBox = document.querySelector('.readBox li');

　butons.forEach((buton, index) =>{
　　buton.addEventListener('click', (e) =>{
　　　e.preventDefault();
　　　console.log(`${index}番目の要素がクリックされました。`);
　　　readBox.classList.add('show');
　　});
});

試したこと

色々と調べながらやったが、結果わかりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

const readBox = document.querySelector('.readBox li');

これ最初のli要素ですよね。
最初のli要素だけ操作してもダメなのでは。