jquery在循环中处理相同的表单按钮

Question

我试图让 jquery 接受表单数据并将其发送到我已经完成的烧瓶。但是，有两个问题：

1. 它只接受第一个表单，即相同的表单（每个元素重复相同的 ID，我希望它们都能够提交）。
2. 当任何提交发生时，它就像它出现在第一个元素表单上一样。

HTML：

{{element[i]}}
{% if model == 'vsm' %}
    <form id="judgeForm">
        <button name="judge" id="accept" value="accept"> Relevant</button>
        <button name="judge" type="submit" id="reject" value="reject">Not Relevant</button>
    </form>
    <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
{% endif %}

jQuery：

$(document).ready(function() {
   $('form[id="judgeForm"]').on('click', function(event) {
      event.preventDefault();
      $.ajax({
            data: {
               accept: $('#accept').val(),
               reject: $('#reject').val(),
            },
            type: 'POST',
            url: '/judge'
         })
         .done(function(data) {
            $('#accept').hide();
            $('#reject').hide();
            $('#successAlert').text(data.msg).show();

         })
      // $('form[id="judgeForm"]').reset();
   });
});

每个元素[i] 都有一个表单，但是 jquery 只接受第一个表单，提交后所有其他表单都被锁定，我试图通过在最后重置表单来解决这个问题，但我不太确定为什么它不起作用。此外，当 jquery 只接受第一个时，即使例如 element[5] 被提交，元素 [0] 的表单也是被激活的表单。

我尝试将 .each 也与 jquery 一起使用，但它不起作用，这就是为什么我发布了我最接近的工作，也许还有另一种解决方法。

非常感谢！

Answer 1

尝试为每个表单设置一个唯一的 id。为每个表单使用相同的 id 将使 jquery/javascript 选择第一个。