为什么jQuery脚本仅适用于表中的第一行

Question

html代码：

<?php if($accountsAwaitingRow_cnt != 0): ?>
                                    <?php foreach($accountsawaitingarray as $datum): ?>
                        <tr data-id="<?php echo $datum['ID']; ?>" id="rowID" href="#">
                          <td id="userID"><?php echo $datum['ID']; ?></td>
                          <td><?php echo htmlspecialchars($datum['Account']); ?></td>
                          <td><?php echo $datum['SubmitDate']; ?></td>
                          <td><span class="label label-warning">Pending</span></td>
                          <td><?php echo htmlspecialchars($datum['Email']); ?></td>
                        </tr>
                                    <?php endforeach; ?>
                            <?php else: ?>
                                <span style="color:red">*</span>There are no accounts awaiting approval, check back later.
                            <?php endif; ?>

脚本：

    $("#rowID").click(function(){
    var User = $("#userID");
    var Box = $("#userBox");
    Box.show();
 $("#userBox").animate({
     maxHeight: '+=1000px'
 }, 1000);
 $("html, body").animate({
     scrollTop: $(document).height()
 }, 1000);
    $("#thisHR").show();
 $("#thisHR").animate({
    maxWidth: '+=1000px'
 }, 1000);
}
);

我要提出的内容是，当管理员单击表中的一行时，将会出现一个框，并通过用户的信息进行扩展，它仅与第一行一起使用，我不明白为什么。

Answer 1

$("＃rowid"(。click((;用" rowID"的ID将侦听器设置在元素上。ID应该是唯一的，因此它仅适用于带有ID的第一个元素。如果要在所有元素上设置侦听器，则应使用类。例如class =" Clickable-Row"