获取在foreach循环中创建的DOM元素

Question

我有一个节点应用程序，有一个经过编码的pug模板，pug模板代表一个项目，并在其中显示相关的目标（因此一对多关系-一个项目可以有许多目标）。 / p>

我想做的是，让用户能够单击表示目标的DOM元素，它会打开模式形式或类似形式，并允许对其进行编辑。我不确定执行此操作的最佳方法。所以这是我的哈巴狗模板元素：

each target in project.targets
           .target__card
              .target__avatar
                 h6.target__title= target.title
                 input#targetId(type='hidden' value=`${target._id}`)

所以我有我的隐藏身份证，那里全是桃子。我希望能够单击它，然后它会打开一个可以对其进行编辑的表单，然后提交给我的端点。但是，如果我有这样的javascript函数：

const targetCard = document.querySelector('.target__card')

if (targetCard) {
          targetCard.addEventListener('click', async (e) => {
             const target = document.getElementById('targetId').value
             console.log('target is ', target)
  })
}

然后这仅适用于第一个DOM元素。但是，我是否真的需要在我的JavaScript或类似内容中再次循环遍历？我已经在模板中循环了，信息已经“正坐在那里”，我可以看到它。即使我确实知道执行此操作的最佳方法（我不确定是否这样做），在js函数中再次遍历它似乎也很浪费。有什么明显的我想念的东西吗？我可以在每个可以简单隐藏和隐藏的元素中嵌入一个表单吗？这似乎也有点浪费。