Arranging bootstrap cards based on id in mysql and php

Question

I want to gather the ordered foods of each Order ID ,I mean separate them based on their order ID here is my code :

  <?php
        $sql = "select * from view_orderlist_perm where state =1  ";
        $result = mysqli_query($connection, $sql);
        while ($row = $result->fetch_assoc()) {
            ?>
            <div class="d-flex flex-row">
                <div class="card " style="width: 210px;border: none">
                    <div class="card-body mr-2">
                        <div class="card-header">
                          <?php echo $row["orderId"] ?>
                        </div>
                        <ol class="list-group flex-row justify-content-between ">
                            <li class="list-group-item d-flex justify-content-between align-items-center"><?php echo $row['fName'] ?>
                                <span class="badge badge-warning ml-2 badge-pill"><?php echo $row['qty'] ?></span>
                            </li>
                            <li class="list-group-item"><input type="checkbox" class=" mr-3 mt-2 form-control"
                            name="<?php echo $row['orderId'] ?>"
                            value="<?php echo $row['fId'] ?>" id="foodReady">
                            </li>
                        </ol>
                    </div>
                </div>
            </div>


            <?php
        }?>

That's how I want it to looks like

And the output of my codes look like this

And here is my view