JS如何从循环单独动作创建单独的按钮？

Question

我使用jQuery的循环，并且创建了用于创建一些具有值的框的循环。问题是，我创建了盒子，对于这个盒子，我从数组中获取值，并且对于每个值，我都必须采取行动，例如调用allert。我的代码：var mokData = [{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' }];$.each(mokData, function (i) {var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button class="tes">Start</button></article>';    $('#favoriteCards').append(templateString);});$(".tes").on("click", function () {    alert("Click");});.cards {    margin: -1rem;}.card {    width: 220px;    float: left;    margin: 1rem;    border: 1px solid #d3d3d3;    padding: 20px;    border-radius: 5px;    background-color: white;}@supports (display: grid) {    .cards {        margin: 0;    }    .cards {        display: grid;        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));        grid-gap: 1rem;    }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><main class="cards">    <div id="favoriteCards"></div></main>如您所见，我对按钮有操作，但是这不正确，因为我希望使用数组中的数据为单独的按钮单独发出警报。