JavaScript单击函数表单元格仅应用于第一行

我在表行上有一个JavaScript click函数，但当我单击它时，该函数只在第一行上起作用。我该如何解决这个问题

<script type="text/javascript">
   $(document).ready(function(){  
        $('#detpanel').hide();
        $("#showdet").click(function(){
            $('#detpanel').slideDown(500);
        });
        $("#hidedet").click(function(){
            $('#detpanel').slideUp(500);
        });
        $('#showdet').hover(function(){
            $(this).divhover("background-color", "yellow");
        });
    });    
</script>

<tbody>
   <?php $i = 0; ?>
    @foreach ($auser as $res)
       <?php $i += 1; ?>
           <tr @if($i%2==0) class="bgcolor dihover" @endif id='showdet' class="dihover">
               <td>{{ $res->id }}</td>
               <td>{{ $res->name }}</td>
               <td>{{ $res->email }}</td>
               <td>
                   <a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a>&nbsp;|&nbsp;
                   <a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
               </td>
            </tr>
    @endforeach
</tbody>

$（文档）.ready（函数（）{
$（'#detpanel'）.hide（）；
$（“#showdet”）。单击（函数（）{
$（'detpanel'）。向下滑动（500）；
});
$（“#隐藏”）。单击（函数（）{
$（#detpanel'）。slideUp（500）；
});
$（'#showdet'）。悬停（函数（）{
$（此）.divhover（“背景色”、“黄色”）；
});
});    
@foreach（$auser作为$res）
{{$res->id}
{{$res->name}
{{$res->email}
| 
@endforeach

元素的ID必须是唯一的，因为您正在循环使用类中创建元素

当使用ID选择器时，它将只返回具有所述ID的第一个元素，因此在您的情况下，click处理程序将只注册到第一个元素

                <tbody>
                    <?php $i = 0; ?>
                    @foreach ($auser as $res)
                        <?php $i += 1; ?>
                        <tr @if($i%2==0) class="bgcolor dihover" @endif class='showdet' class="dihover">
                            <td>{{ $res->id }}</td>
                            <td>{{ $res->name }}</td>
                            <td>{{ $res->email }}</td>
                            <td>
                                <a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a>&nbsp;|&nbsp;
                                <a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>

---

元素id重复

$(document).ready(function () {
    $('#detpanel').hide();
    $(".showdet").click(function () { //use class selector here
        $('#detpanel').slideDown(500);
    });
    $("#hidedet").click(function () {
        $('#detpanel').slideUp(500);
    });
    $('#showdet').hover(function () {
        $(this).divhover("background-color", "yellow");
    });
});