Javascript 自动递增HTML类/ID以区分div

我目前正在开发一个应用程序，在这个应用程序中，用户可以获得一个列表，其中包含一组div及其详细信息，每个div中都有隐藏的详细信息，用户可以进行切换。问题是，当您单击某个框的“详细信息”时，它会切换所有框上的类，而不仅仅是在单击的框内。我一直在寻找这个问题的答案，并尝试自动增加ID/类，以便创建的每个框都有一个唯一的标识符。我需要这样做，使“额外的细节”只打开与卡“细节”点击。提前感谢您的帮助

我的代码

$（“.card details”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“.extra details”）.toggleClass（“隐藏”）；
});
h4{
填充：10px 0 5px；
字号：18px；
字体大小：粗体；
}
.卡片{
边界：无；
盒影：2px2p5pRGBA（201201201.5）；
填充物：5px；
保证金：5px；
最大宽度：350px；
背景：透明；
边框：1px实心#EFEF；
字体大小：12px；
}
人力资源{
边框：1px实心#EFEF；
宽度：100%；
边际上限：0；
}
.卡头{
颜色：#005ABB；
}
.卡片容器{
边缘顶部：20px；
左边距：5px；
}
.信用卡信息{
左边距：20px；
背景：透明！重要；
}
.信用卡详情{
颜色：#005ABB；
左缘：85%；
}
.卡详细信息：悬停{
文字装饰：下划线；
颜色：#F9A51B；
光标：指针；
}
.隐藏{
显示：无！重要；
}

20英尺泰坦底盘

设备类型
可用数量
选定数量
细节
地址：测试地址
营业时间：工作日上午9时至下午5时
20英尺泰坦底盘

设备类型
可用数量
选定数量
细节
地址：测试地址
营业时间：工作日上午9时至下午5时
20英尺泰坦底盘

设备类型
可用数量
选定数量
细节
地址：测试地址
营业时间：工作日上午9时至下午5时
20英尺泰坦底盘

设备类型
可用数量
选定数量
细节
地址：测试地址
营业时间：工作日上午9时至下午5时
$(".card-details").on("click", function (e) {
    e.preventDefault();
    $(this).siblings(".extra-details").toggleClass("hidden");
});