JavaScript更改了不正确的元素，并且没有应用到所需的元素

我是新手，所以请原谅我缺乏理解。我一直在从CodePen编辑一支笔，我被卡住了。我复制并修改了基本配置文件卡，使其具有两张卡。有JavaScript可以改变卡片上显示的内容。我不知道如何在复制的卡上使用JS函数。选择第二张卡上的按钮时，会更改第一张卡的显示方式。我想知道为了实现这一点，我需要在JS中做哪些更改。我在网上搜索，没有找到解决办法。希望这里有人能帮忙

const buttons=document.queryselectoral（“.card buttons”）；
const sections=document.queryselectoral（“.card section”）；
const card=document.querySelector（“.card”）；
const handleButtonClick=（e）=>{
const targetSection=e.target.getAttribute（“数据节”）；
const section=document.querySelector（targetSection）；
targetSection！=“关于”
？卡片.类别列表.添加（“处于活动状态”）
：card.classList.remove（“处于活动状态”）；
card.setAttribute（“数据状态”，targetSection）；
sections.forEach（（s）=>s.classList.remove（“处于活动状态”）；
buttons.forEach（（b）=>b.classList.remove（“处于活动状态”）；
e、 target.classList.add（“处于活动状态”）；
节.classList.add（“处于活动状态”）；
};
按钮。forEach（（btn）=>{
btn.addEventListener（“单击”，把手按钮单击）；
});
var elements=document.getElementsByClassName（“卡片”）；
对于（var i=0；i

@导入url（“https://fonts.googleapis.com/css?family=DM+Sans:400500 | Jost:400500600&display=swap“；
* {
框大小：边框框；
}
身体{
颜色：#2b2c48；
字体系列：“Jost”，无衬线；
背景图片：url(https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=2378&q=80）；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
最小高度：100vh；
显示器：flex；
柔性包装：包装；
填充：20px；
}
.卡片{
最小宽度：340px；
最大宽度：340px；
保证金：自动；
溢出y：自动；
位置：相对位置；
z指数：1；
溢出x：隐藏；
背景色：rgba（255、255、255、1）；
显示器：flex；
过渡：0.3s；
弯曲方向：立柱；
边界半径：10px；
盒影：0 0 8px rgba（255，255，255，0.2）；
}
.card[数据状态=“#关于”]{
高度：550px；
.主卡{
填充顶部：0；
}
}
.card[数据状态=“#联系人”]{
高度：550px；
}
.card[数据状态=“#体验”]{
高度：550px；
}
.card.is-active{
.卡头{
高度：80px；
}
.卡片封面{
高度：100px；
顶部：-50px；
}
.卡片化身{
转化：无；
左：20px；
宽度：50px；
高度：50px；
底部：10px；
}
.卡全名，
.卡职务，
.卡作业类型{
左：86px；
转化：无；
}
.卡全名{
底部：18px；
字号：19px；
}
.信用卡职务{
底部：16px；
字母间距：1px；
字体大小：10px；
}
.卡作业类型{
底部：0px；
字母间距：1px；
字体大小：10px；
}
}
.卡头{
位置：相对位置；
显示器：flex；
高度：200px；
弹性收缩：0；
宽度：100%；
过渡：0.3s；
* {
过渡：0.3s；
}
}
.卡片封面{
宽度：100%；
身高：100%；
位置：绝对位置；
高度：160px；
前-20%；
左：0；
将改变：顶部；
背景尺寸：封面；
背景位置：中心；
过滤器：模糊（30px）；
转换：比例（1.2）；
过渡：0.5s；
}
.卡片化身{
宽度：100px；
高度：100px；
盒影：0 8px 8px rgba（0,0,0,0.2）；
边界半径：50%；
对象位置：中心；
对象匹配：覆盖；
位置：绝对位置；
底部：0；
左：50%；
转换：translateX（-50%）translateY（-64px）；
}
.卡全名{
位置：绝对位置；
底部：0；
字体大小：22px；
字号：700；
文本对齐：居中；
空白：nowrap；
转换：translateY（-10px）translateX（-50%）；
左：50%；
}
.信用卡职务{
位置：绝对位置；
底部：0；
字体大小：11px；
空白：nowrap；
字号：500；
不透明度：0.7；
文本转换：大写；
字母间距：1.5px；
保证金：0；
左：50%；
转换：translateX（-50%）translateY（-7px）；
}
.卡作业类型{
位置：绝对位置；
底部：0；
字体大小：11px；
空白：nowrap；
字号：500；
不透明度：0.7；
文本转换：大写；
字母间距：1.5px；
保证金：0；
左：50%；
转化：translateX（-50%）translateY（10px）；
}
.主卡{
位置：相对位置；
弹性：1；
显示器：flex；
填充顶部：10px；
弯曲方向：立柱；
}
.卡片字幕{
字号：700；
字体大小：13px；
边缘底部：8px；
}
.卡片内容{
填充：20px；
文本对齐：对齐；
}
.卡片说明{
线高：1.6；
颜色：#636b6f；
字体大小：14px；
保证金：0；
字体大小：400；
字体系列：“DM Sans”，无衬线；
}
.card社交网站{
显示器：flex；
位置：底部；
对齐项目：居中；
填充：0 0px；
边缘底部：30px；
转化：translateX（25%）translateY（350%）；
svg{
填充：rgb（165181206）；
宽度：16px；
显示：块；
过渡：0.3s；
}
a{
颜色：#8797a1；
高度：32px；
宽度：32px；
边界半径：50%；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
过渡：0.3s；
背景色：rgba（93133193,0.05）；
边界半径：50%；
右边距：10px；
&：悬停{
svg{
  // Find the card
  const card = e.target.closest(".card");

  const targetSection = e.target.getAttribute("data-section");
  // Then find the section by searching for dataset id atribute
  const section = card.querySelector(`[data-id='${targetSection}']`);