Javascript 如何基于单击左侧的元素来更改右侧窗格中的名称？

我正在尝试创建聊天应用程序。为此，我创建了一个HTML和CSS设计

对于我编写的代码，我有两个方面：在左侧有一个用户列表，项目可以单击，因此当我单击用户时，用户名和id应该显示在另一个窗格的顶部

消息传递
最近的
一,


二,


三,

我添加了Javascript来完成这项任务。
全屏查看输出

const personArr=document.queryselectoral（“.personal\u name”）；
personArr.forEach（项目=>{
item.addEventListener（'单击'，（）=>{
document.querySelector（“#insertName”）.innerText=“”；
document.querySelector（“#insertName”）.innerText=`${item.id}.${item.innerText}`；
document.querySelector（“#insertId”）.innerText=item.id；
})
})

.container{
最大宽度：3000px；
保证金：自动；
}
img{
最大宽度：100%；
}
.U.人{
背景：#F8无重复滚动0；
浮动：左；
溢出：隐藏；
宽度：40%；
右边框：1px实心#C4C4；
}
.inbox_msg{
边框：1px实心#C4C4；
明确：两者皆有；
溢出：隐藏；
}
.top_spac{
利润率：20px0；
}
.最近的标题{
浮动：左；
宽度：40%；
}
.srch_bar{
显示：内联块；
文本对齐：右对齐；
宽度：60%；
填充：；
}
.headind_srch{
填充：10px29px10px20px；
溢出：隐藏；
边框底部：1px实心#C4C4；
}
.最新标题h4{
颜色：#05728f；
字号：21px；
保证金：自动；
}
.srch_条输入{
边框：1px实心#cdcdcd；
边框宽度：0 1px 0；
宽度：80%；
填充：2px4px6px；
背景：无；
}
.srch_栏.输入组加载项按钮{
背景：rgba（0,0,0,0）无重复滚动0；
边界：中等无；
填充：0；
颜色：#707070；
字号：18px；
}
.srch_bar.input组加载项{
利润率：0-27px；
}
.chat_ib h5{
字体大小：15px；
颜色：#4646；
边际：0.08像素0；
}
.chat_ib h5 span{
字体大小：13px；
浮动：对；
}
.聊天室{
字体大小：14px；
颜色：#9898；
保证金：自动；
}
.聊天室{
浮动：左；
宽度：11%；
}
.聊天室{
浮动：左；
填充：0 15px；
宽度：88%；
}
.与人聊天{
溢出：隐藏；
明确：两者皆有；
}
.聊天室列表{
边框底部：1px实心#C4C4；
保证金：0；
填充：18px 16px 10px；
}
.inbox_聊天室{
高度：550px；
溢出y：滚动；
}
.主动聊天{
背景：#ebebeb；
}
.传入消息\u img{
显示：内联块；
宽度：6%；
}
.收到_msg{
显示：内联块；
填充：0 10px；
垂直对齐：顶部；
宽度：92%；
}
.收到带有D_消息p{
背景：#ebebebeb无重复滚动0；
边界半径：3px；
颜色：#6464；
字体大小：14px；
保证金：0；
填充：5px10px 5px12px；
宽度：100%；
}
.时间和日期{
颜色：#7474；
显示：块；
字体大小：12px；
利润率：8px0；
}
.收到带有d_msg的{
宽度：57%；
}
梅斯格斯先生{
浮动：左；
填充：30px 15px 0 25px；
宽度：60%；
}
.已发送消息\u msg p{
背景：#05728f无重复滚动0；
边界半径：3px；
字体大小：14px；
保证金：0；
颜色：#fff；
填充：5px10px 5px12px；
宽度：100%；
}
{
溢出：隐藏；
利润率：26px 0 26px；
}
.sent_msg{
浮动：对；
宽度：46%；
}
.输入\消息\写入输入{
背景：rgba（0,0,0,0）无重复滚动0；
边界：中等无；
颜色：#4c；
字体大小：15px；
最小高度：48px；
宽度：100%；
}
.type_msg{
边框顶部：1px实心#C4C4；
位置：相对位置；
}
.msg\u send\u btn{
背景：#05728f无重复滚动0；
边界：中等无；
边界半径：50%；
颜色：#fff；
光标：指针；
字号：17px；
高度：33像素；
位置：绝对位置；
右：0；
顶部：11px；
宽度：33px；
}
.信息{
填充：0 50px 0；
}
.msg_历史{
高度：516px；
溢出y：自动；
}

消息传递
最近的

@Ferin我还需要在名称下方获取id如何？我已经解决了问题。你需要调整你的代码，并在锚定标记@Ferin中动态添加id属性。实际上，当我检查同一个div中显示的名称和id时，我正在尝试向它们显示不同的div。你能帮我吗？@Ferin