Javascript JS如何从循环单独操作创建单独按钮？

我在jQuery中使用循环，我创建循环以创建一些有值的框

问题是，我创建了框，对于这个框，我从数组中获取值，对于每个值，我必须有操作，例如调用allert

我的代码：

var mokData=[
{类别：“材料”，id:'代码0-1'，名称：'机器制动'}，
{类别：“材料”，id:'代码0-1'，名称：'机器制动'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of machine'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of line'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of machine'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of line'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of machine'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of line'}
];
$.each（mokData，函数（i）{
var templateString=''+mokData[i]。类别+''+mokData[i]。名称+'
'+mokData[i]。id+'
Start'；
$（“#favoriteCards”）.append（templateString）；
});
$（“.tes”）。在（“单击”，函数（）{
警报（“点击”）；
});
.cards{
保证金：-1rem；
}
.卡片{
宽度：220px；
浮动：左；
保证金：1rem；
边框：1px实心#D3；
填充：20px；
边界半径：5px；
背景色：白色；
}
@支持（显示：网格）{
.卡片{
保证金：0；
}
.卡片{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格间距：1rem；
}
}
将要作为警报的数据添加到元素中，并在需要警报时获取该数据。除了callback中的参数外，第二个参数是添加第二个参数的元素（甚至可以使用
this
），并将其用于引用元素，而不是通过索引获取


var mokData=[{“类别”：“材料”，“id”：“代码0-1”，“名称”：“机器制动”}，{“类别”：“材料”，“id”：“代码0-1”，“名称”：“机器制动”}，{“类别”：“刀具”，“id”：“代码0-1”，“名称”：“机器制动”}，{“类别”：“刀具”，“id”：“代码0-1”，“名称”：“线制动”}，{“类别”：“刀具”，“id”：“代码0-1”，“名称”：“机器制动”}，{“类别”：“工具”，“id”：“代码0-1”，“名称”：“线路制动”}，{“类别”：“工具”，“id”：“代码0-1”，“名称”：“机器制动”}，{“类别”：“工具”，“id”：“代码0-1”，“名称”：“线路制动”}）；
$.each（mokData，function（）{
var templateString=''+this.category+''+this.name+'
'+this.id+'
Start'；
$（“#favoriteCards”）.append（templateString）；
});
$（“.tes”）。在（“单击”，函数（）{
警报（$（this.data（'alert'））；
});
.cards{
保证金：-1rem；
}
.卡片{
宽度：220px；
浮动：左；
保证金：1rem；
边框：1px实心#D3；
填充：20px；
边界半径：5px；
背景色：白色；
}
@支持（显示：网格）{
.卡片{
保证金：0；
}
.卡片{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格间距：1rem；
}
}
如果要返回不同的值​​对于每张卡，您都需要这样做。
var mokData=[
{类别：“材料”，id:'代码0-1'，名称：'机器制动'}，
{类别：“材料”，id:'代码0-1'，名称：'机器制动'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of machine'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of line'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of machine'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of line'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of machine'}，
{类别：“工具”，id:'Code0-1'，名称：'Brakedown of line'}
];
$.each（mokData，函数（i）{
var templateString=`+mokData[i]。类别+''+mokData[i]。名称+'
'+mokData[i]。id+i+'
Start'；
$（“#favoriteCards”）.append（templateString）；
});
让doc=document.queryselectoral（“.card”）；
doc.forEach（（x）=>x.addEventListener（“单击”，函数）（）{
警报（x.className）；
}))
.cards{
保证金：-1rem；
}
.卡片{
宽度：220px；
浮动：左；
保证金：1rem；
边框：1px实心#D3；
填充：20px；
边界半径：5px；
背景色：白色；
}
@支持（显示：网格）{
.卡片{
保证金：0；
}
.卡片{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格间距：1rem；
}
}

你总是可以选择内联事件。@KrishnaPrashatt但我真的开始了，我现在不知道该怎么做：（你是说所有的警报消息都应该不同，或者你想为此编写单独的操作？@qunz666你可以参考这个，你希望每个警报框都有相应的数据吗？