JavaScript click function table cell only applied on the first row

Question

I had a JavaScript click function on a table row, but when I click it, the function only works on the first row. How do I fix this?

<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>

Answer 1

ID of an element must be unique, since you are creating the elements in a loop use class.

When using ID selector it will return only the first element with the said ID, so in your case the click handler is getting registered to only the first element

                <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>

then use class selector to register the click handler

$(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");
    });
});