在单击特定行的动态表手风琴中的表

Question

在这段代码中，我在一个表中创建了一个表，我正在尝试填充表中的数据，我正在使用PHP获取数据，但我需要在这里手风琴点击特定的行，html用Javascript编写应该扩展。单击特定行时，我希望该特定行必须扩展。帮我解决这个问题。

<div class="row" style="float:right; display: flex; margin-bottom:10px;">
       <p style="font-size: 18px; margin-right: 30px; "><b>Search </b> </p>
    <input type="text" id="search-payment-detail" style="margin-right: 5px;" class="form-control" />
    <a href="/admin/member-payment-detail" class="btn btn btn-primary btn-sm">Add Member Payment Detail</a>
   </div>
    {{--{{dd($payment_details)}}--}}
    <div id="prefetched">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>Role</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody>
            @foreach($payment_details as $payment_detail)
                <tr class="tableshow">
                    <td>{{$payment_detail->sc_fullname}}</td>
                    <td>{{$payment_detail->sc_email}}</td>
                    <td>{{$payment_detail->sc_mobile_no}}</td>
                    <td>{{$payment_detail->role}}</td>
                    <td>{{$payment_detail->status}}</td>

                </tr>
                <tr>
                    <td colspan="5" style="display:none" class="collapseshow"><table style="width:100%" class="table table-bordered">
                            @foreach($payment_detail->payementDetail as $pd)

                                <td class="width:100%">p1: {{$pd->p1}}</td>
                                <td>p2:{{$pd->p2}}</td>
                                <td>p3:{{$pd->p3}}</td>
                                <td>p4:{{$pd->p4}}</td>
                                <td>p5:{{$pd->p5}}</td>
                                <td>p6:{{$pd->p6}}</td>
                                <td>p7:{{$pd->p7}}</td>
                                <td>p8:{{$pd->p8}}</td>
                                <td>p9:{{$pd->p9}}</td>
                                <td>p10:{{$pd->p10}}</td>
                                <td>p11:{{$pd->p11}}</td>
                                <td>p12:{{$pd->p112}}</td>
                                <a  href="/admin/edit-member-payment-detail/{{$pd->id}}">Edit</a>
                                <a  href="/admin/delete-member-payment-detail/{{$pd->id}}">Delete</a>

                            @endforeach
                        </table>

                    </td>

                    @endforeach
                </tr>
            </tbody>
        </table>

    </div>
    <div id="search-fetched"></div>
@endsection

@section('scripts')
    <script>



        $('#search-payment-detail').keyup(function () {
            if ($.trim($('#search-payment-detail').val())) {
                $.get('/admin/search-member-payment-detail', {info: $('#search-payment-detail').val()}, function (data) {
                    var html = `<div><table class="table table-bordered">
                      <thead>
                       <tr>
                       <th>Name</th>
                       <th>Email</th>
                        <th>Mobile</th>
                        <th>Role</th>
                        <th>Status</th>
                        </tr>
                        </thead>`;

                    for (let i = 0; i < data.length; i++){
                        html += `
                           <tr>
                           <td>${data[i].sc_fullname}</td><td>${data[i].sc_email}</td><td>${data[i].sc_mobile_no}</td><td>${data[i].role}</td><td>${data[i].status}</td></tr>  `;
                        for (let j = 0; j < data[i].payement_detail.length; j++){
                            html+=`<tr>
                                      <td colspan="5">
                                       <table class="table table-bordered">
                                        <td>p1: ${(data[i].payement_detail[j].p1 != null) ? data[i].payement_detail[j].p1 : ''}</td>
                                        <td>p2:${(data[i].payement_detail[j].p2 != null) ? data[i].payement_detail[j].p2 : ''}</td>
                                        <td>p3:${(data[i].payement_detail[j].p3 != null) ? data[i].payement_detail[j].p3 : ''}</td>
                                        <td>p4:${(data[i].payement_detail[j].p4 != null) ? data[i].payement_detail[j].p4 : ''}</td>
                                        <td>p5:${(data[i].payement_detail[j].p5 != null) ? data[i].payement_detail[j].p5 : ''}</td>
                                        <td>p6:${(data[i].payement_detail[j].p6 != null) ? data[i].payement_detail[j].p6 : ''}</td>
                                        <td>p7:${(data[i].payement_detail[j].p7 != null) ? data[i].payement_detail[j].p7 : ''}</td>
                                        <td>p8:${(data[i].payement_detail[j].p8 != null) ? data[i].payement_detail[j].p8 : ''}</td>
                                        <td>p9:${(data[i].payement_detail[j].p9 != null) ? data[i].payement_detail[j].p9 : ''}</td>
                                        <td>p10:${(data[i].payement_detail[j].p10 != null) ? data[i].payement_detail[j].p10 : ''}</td>
                                        <td>p11:${(data[i].payement_detail[j].p11 != null) ? data[i].payement_detail[j].p11 : ''}</td>
                                        <td>p12:${(data[i].payement_detail[j].p12 != null) ? data[i].payement_detail[j].p12 : ''}</td>
                                        <a style="display: none;" href="/admin/edit-member-payment-detail/${data[i].payement_detail[j].id}">Edit</a>
                                       </table>
                                       </td>
                            </tr>`;
                        }
                    }
                    html += `</table></div>`
                    $('#search-fetched').empty().append(html);
                    $('#prefetched').hide();

                });
            } else {
                $('#prefetched').show();
                $("#search-fetched").empty();
            }
        })
        $(document).ready(function(){
            $(".tableshow").click(function(){
                $(".collapseshow").toggle();
            });
        });



    </script>