表单提交后重新加载表 - AJAX

Question

我有一个表，某种待办事项列表，用户可以单击一个复选图标，并更改数据库中的值。这个函数运行良好，但问题是，使用我的脚本只能用AJAX检查表中的第一个条目，如果用户检查第二个或第三个或第四个条目，依此类推，数据库内的值会改变，但是页面重新加载和AJAX功能无效。

这是我的代码：

的index.php：

if ($checktodo=="true") {
    $content=array("finished"=>$localtime);
    updateToDoInfo($id,$content);
}

todo.php：

<?php
// AJAX Script to submit form withouht page refresh
echo ("
    <script>
        $(function() {
            $('#form3').on(\"submit\", function(event) {
                event.preventDefault();

                $.ajax({
                    url: 'index.php',
                    type: 'post',
                    data: $(this).serialize(),
        beforeSend: function(){
                                    $('#loading').show();
                    },
                    complete: function(){
                                    $('#loading').hide();
                    },
                    success: function(html) {
            loadTab(1);
                    }
                });
            });
        });
    </script>
");

// Part of todo list table
if ($todo["duedate"][$x]<$localtime) {
    <tr>
        <td>
            <form name='form3' id='form3' action='./index.php' method='post'>
                <input type='hidden' name='checktodo' value='true'>
                <input type='hidden' name='id' value='".$todo["id"][$x]."'>
                <input type='hidden' name='pers_id' value='".$pers_id."'>
                <input type='hidden' name='sid' value='".$sid."'>
                <button class='btn btn-link btn-xs' type='submit'><i class='fa fa-check fa-2x'></i></button>
            </form>
        </td>
        <td>
        <a href='#edit-todo' onClick=\"setEditToDo('".$todo["id"][$x]."', '".$todo["descr"][$x]."')\" data-toggle='modal'><i class='fa fa-pencil-square-o fa-2x'></i></a>
        </td>

        if ($todo["cid"][$x]!=0) {
            <td>
            <a href='./index.php?func=editcontact&id=".$todo["cid"][$x]."&view=true&pers_id=$pers_id&sid=$sid' target='_blank'><i class='fa fa-user fa-2x'></i></a>
            </td>
            } else {
                <td></td>
        }

        <td>
        ".date("d.m.Y",$todo["duedate"][$x])."
        </td>
        <font color='red'>".strtoupper($creator["lastname"][0])." ".$creator["firstname"][0].": <b>".($todo["descr"][$x])."</b></font>
        </td>
    </tr>
} else {
    <tr>
        <td>
            <form name='form3' id='form3' action='./index.php' method='post'>
                <input type='hidden' name='checktodo' value='true'>
                <input type='hidden' name='id' value='".$todo["id"][$x]."'>
                <input type='hidden' name='pers_id' value='".$pers_id."'>
                <input type='hidden' name='sid' value='".$sid."'>
                <button class='btn btn-link btn-xs' type='submit'><i class='fa fa-check fa-2x'></i></button>
            </form>
        </td>
        <td>
        <a href='#edit-todo' onClick=\"setEditToDo('".$todo["id"][$x]."', '".$todo["descr"][$x]."')\" data-toggle='modal'><i class='fa fa-pencil-square-o fa-2x'></i></a></td>

        if ($todo["cid"][$x]!=0) {
            <td>
            <a href='./index.php?func=editcontact&id=".$todo["cid"][$x]."&view=true&pers_id=$pers_id&sid=$sid' target='_blank'><i class='fa fa-user fa-2x'></i></a>
            </td>
            } else {
            <td></td>
        }
        <td>".date("d.m.Y",$todo["duedate"][$x])."</td>";
        <td>"; callText('my_calendar_019'); print " ".strtoupper($creator["lastname"][0])." ".$creator["firstname"][0].": <b>".($todo["descr"][$x])."</b></td>";
    </tr>";
}
?>

因此，您可以看到我使用上面的js / ajax代码提交我的表单（id：form3）。正如我所说，它仅适用于我表中的第一个条目，但不适用于所有其他条目。有人能告诉我我做错了吗？

谢谢， 克里斯