Send (Pass) single table row data to Controller in ASP.Net Core 6.0

Hello,

Good day, I have two class Called Order and OrderDetails.

To have the both classes displayed in a single view i had to wrap them in single class.

I am able to display the rows to the table. But my issue now is on post instead of seeing the multiple rows in the table it only shows one single row.

I want to be able to see the multiple rows in the table in my controller.

public class Order
{
    [Key]
    public int OrderId { get; set; }
 
    [Display(Name = "CustomerName")]
    
    public string? CustomerName { get; set; }
           
    public ICollection<OrderDetail>? OrderDetails { get; set; }
}

public class OrderDetail
{
    [Key]
    public int DetailId { get; set; }
    [ForeignKey("OrderId")]
    public int OrderId { get; set; }
    [Display(Name = "Service")]
    public string ServiceName { get; set; }
 
    [Display(Name = "Quantity")]
    public int Quantity { get; set; }
   
    [Display(Name ="Unit Price")]
    public float UnitPrice { get; set; }      
    public Order? Order { get; set; }
}

public class MultipleOrderModel
{
    public Order Order { get; set; }
    public List<OrderDetail> OrderDetails { get; set; }
}

<form asp-action="Order">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="col-md-4">
        <label asp-for="Order.CustomerID" class="control-label"></label>
        <select asp-for="Order.CustomerID" class="dropdown form-control select2" asp-items="ViewBag.CustomerID" id="CustomerID" name="CustomerID">
            <option value="" selected disabled>---Customer---</option>
        </select>
        <span asp-validation-for="Order.CustomerID" class="text-danger"></span>
    </div>
    <div class="form-group">
        <table id="zero_config" class="table table-striped table-bordered display">
            <thead>
                <tr>
                    <th>SN
                    </th>
                    <th>Services
                    </th>
                    <th>Qty/Hrs
                    </th>
                    <th>Unit Price
                    </th>
                    <th>Total
                    </th>
                </tr>
            </thead>
            <tbody>
                @if (Model.OrderDetails != null && Model.OrderDetails.Count > 0)
                {
                    int j = 0;
                    int sno = 0;
                                             
                    foreach (var item in Model.OrderDetails)
                    { 
                        <tr>
                            <td>@{
                                    sno++;
                                }
                                @sno
                            </td>
                            <td>
                                <select asp-for="OrderDetails[j].ServiceName" asp-items="ViewBag.ServiceID" class="dropdown form-control select2">
                                    <option value="" selected disabled>---Services---</option>
                                </select>
                            </td>
                            <td>
                                <input asp-for="OrderDetails[j].Quantity" class="form-control" type="number" placeholder="Qty/Hrs" />
                            </td>
                            <td>
                                <input asp-for="OrderDetails[j].UnitPrice" class="form-control" type="number" placeholder="Unit Price" />
                            </td>
                            <td>
                                <input asp-for="OrderDetails[j].TotalAmount" class="form-control" type="number" placeholder="Total Amount" />
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
    <div class="form-group">
        <input type="submit" value="Add New Order" class="btn btn-primary" />
    </div>
</form>

Thank you very much for your precious time.