Table dropdown with bootstrap 5 not working

Question

I am trying to show product items when button order detail is pressed, but its not working in any way I tried, it's possible to make it work with bootstrap 5 or I have to do it with javascript ?
Useless information for "It looks like your post is mostly code; please add some more details." : In the first foreach I am displaying information from the order, then the second foreach is retrieving product id and quantity from a different table that contain order id and the third foreach is getting product where id from the second foreach in order to display product details

<table class="table border">
    <thead>
        <tr>
            <th class="h4" style="width: 18%">Order Number</th>
            <th class="h4">Date</th>
            <th class="h4">Total</th>
            <th class="h4">Status</th>
            <th class="h4"></th>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
        <?php
        foreach ($order as $row_order) {
            $order_status = intval($row_order->status);
        ?>
            <td class="fw-bold">{{ $row_order->id }}</td>
            <td class="fw-bold">{{ $row_order->added_on }}</td>
            <td class="fw-bold">{{ $row_order->order_total }} $</td>
            <td class="fw-bold"><?php if($order_status == 0){ ?>
                Not Paid
                <?php }elseif ($order_status == 1) { ?>
                Paid
                <?php }elseif ($order_status == 2) { ?>
                Shipped
                <?php }elseif ($order_status == 3) { ?>
                Delivered
                <?php } ?>
            </td>
            <td></td>
            {{-- <td><a class="btn btn-primary" href="">Order Detail</a></td> --}}
            <div class="btn-group">
                <td>
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    Order Detail
                    </button>
                </td>
                @foreach (\App\Models\Order_product_size_color::where('order_id', '=', $row_order->id)->get() as $order_variant)
                    @foreach (\App\Models\Product_size_color::where('id', '=', $order_variant->product_size_color_id)->get() as $variant)
                    <div class="dropdown-menu">
                        <td class="border-0 p-0 dropdown-item">
                            <tr>
                                <td class="border-0"><img class="rounded" src="{{ asset('storage/'. $variant->image1->product_image) }}" alt="" style="width: 80px; height: 90px;"></td>
                                <td class="fw-bold border-0">{{ $variant->product->product_name }}</td>
                                <td class="border-0">{{ $order_variant->count }} products</td>
                                <td class="fw-bold border-0">Size: {{ $variant->size->size_name }}</td>
                                <td class="fw-bold border-0">Color: {{ $variant->color->color_name }}</td>
                                <td class="fw-bold border-0">${{ $variant->product->price }}</td>

                            </tr>
                        </td>
                    </div>
                    @endforeach
                @endforeach
            </div>
            <tr>
                <td class="fw-bold">Delivery Address:</td>
                <td class="fw-bold">{{ $row_order->address }}</td>
            </tr>
        </tr>
        <?php }//end foreach ?>
    </tbody>
</table>