怎样在两个区域同时输出一个文章里的不同内容？

遇到的问题：如代码所示里A区作为module输出内容列表，每个内容赋予一个ID，B区作为点击A区标题时显示B区对应改标题ID的详情内容和字段内容（如content、data等系统字段或自定义字段），不知道怎么搞了，请大家帮帮忙，十分感谢。

输出内容区【A区】

<div class="pagination justify-content-end mb-0">
<div><ul><li><a href="#" id="1" >标题1</a></li></ul></div>
<div><ul><li><a href="#" id="2" >标题2</a></li></ul></div>
<div><ul><li><a href="#" id="3" >标题3</a></li></ul></div>
</div>

隐藏详细内容id区【B区】（触发A区id时显示对应相同id内容）

<div class="hstack gap-2 fs-15">
<div id="1" >内容1，字段1</a></div>
<div id="2" >内容2，字段2</a></div>
<div id="3" >内容3，字段3</a></div>
</div>