I'm using a table to store shopping list items.

What i want is that immediately I click on the add to list, the inserted item should display in the details below using an asigned id.

So it means all item added to list by that id will be display in the details mvc table. Below is code.

What am I doing wrong.

Please help.

@model Tophigh_pos_mvc.Models.CashSalesOrderViewModel
@{
    ViewBag.Title = "CashSales";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<link href="~/css/product.css" rel="stylesheet" />

<div class="container-fluid">

    <div class="card card-info">
        <div class="card-header">
            <h6 class="card-title">Sales Form</h6>
        </div>
        <!-- /.card-header -->
        <!-- form start -->

        <div class="card-body">

            <form id="newBasket">

                <div class="form-group row">
                    <div class="col-sm-6">
                        <label>Select Product</label>
                        @Html.DropDownList("ddlproduct", new SelectList(Model.ProductSelectListItem, "Value", "Text"), new { @id = "ddlproduct", @class = "form-control", @onchange = "getProductData(this)" })
                    </div>
                    <div class="col-sm-3">
                        <label>Qty</label>
                        @Html.TextBoxFor(m => m.qty, new { @id = "txtqty", @class = "form-control", @Value = "1", @style = "font-weight:bold; text-align:center" })
                    </div>
                    <div class="col-sm-3">
                        <label>Price</label>
                        @Html.TextBoxFor(m => m.salesprice, new { @id = "txtprice", @class = "form-control", @Value = "0", @readonly = "readonly", @style = "background-color:white; font-weight:bold; text-align:center" })
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-8">
                        <label>Product Description</label>
                        <input id="txtproductdescription" name="txtproductdescription" type="text" class="form-control" readonly="readonly" style="background-color:white" />

                    </div>

                    <div class="col-sm-4">
                        <br />
                        <input id="btnaddtolist" type="button" class="btn btn-success" value="Add To List" />
                    </div>

                </div>

                @Html.HiddenFor(m => m.proid, new { @id = "txtproid" })
                @Html.HiddenFor(m => m.productname, new { @id = "txtproduct" })
                @Html.HiddenFor(m => m.unitcost, new { @id = "txtcost" })
                @Html.HiddenFor(m => m.basketid, new { @id = "txtbasketid", @Value = ViewBag.otp })


                <hr style="border-block-color: #FF5733" />

                <table class="table table-striped table-bordered" id="cashsalesTable">

                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Qty</th>
                            <th>Price</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>

                </table>


                <div class="modal-footer">
                    <input type="reset" value="Add" class="btn btn-primary" id="btnSubmit" />
                    <input type="reset" value="Update" class="btn btn-success" id="btnUpdate" />
                    <input type="reset" value="Close" class="btn  btn-danger" id="btnClose" />
                </div>

            </form>
        </div>
    </div>
    @section scripts {
        <script src="~/js/cashsales.js"></script>
        <script src="~/Scripts/notify.min.js"></script>
    }
</div>
/*Insert New Basket*/
$(document).ready(function () {

    $("#btnaddtolist").click(function () {
        
        var data = $("#newBasket").serialize();

        $.ajax({

            type: "POST",
            url: "/CashSales/AddToCart",
            data: data,
            success: function (response) {
                $("#loaderDiv").hide();
               
                if (response.success) {
                    alert(response.message);
                    LoadData();
                }
                else {
                    alert(response.message);
                    LoadData();
                }
            },
            error: function () {
                alert('Inert error please check.');
            }
        })
    })
})



/*Load basket data*/
function LoadData() {
    var number = $('[id*=txtbasketid]').val();
    $.ajax({
        async: true,
        "url": "/CashSales/GetBasketByID",
        "type": "GET",
        "data": {basketid : number},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
       
        "Columns": [

            { "data": "Product" },
            { "data": "Qty" },
            { "data": "SalesPrice" },
            { "data": "Total" },
            {
                "data": "ID", "render": function (data) {

                    return "<a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" + data + ")><i class='fa fa-trash'></i>Remove</a>";
                },

                "width": "150px"
            }
        ],
    });

}

//Insert new product
[HttpPost]
public ActionResult AddToCart(CashSalesOrderViewModel objbsk)
{
    try
    {
        using (POSContext db = new POSContext())
        {
            //Insert Product
            CashSalesBasket bskdata = new CashSalesBasket();
            bskdata.basketid = objbsk.basketid;
            bskdata.proid = objbsk.proid;
            bskdata.product = objbsk.productname;
            bskdata.qty = objbsk.qty;
            bskdata.price = objbsk.salesprice;
            bskdata.cost = objbsk.unitcost;
            db.CashSalesBaskets.Add(bskdata);
            db.SaveChanges();

            return Json(new { success = true, message = "Saved Successfully", JsonRequestBehavior.AllowGet });
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

//Get all product
public JsonResult GetBasketByID(Guid basketid)
{
    try
    {
        using (POSContext db = new POSContext())
        {
            var cartlist = db.CashSalesBaskets.Where(x => x.basketid == basketid).ToList();

            var basketlist = (from basket in cartlist
                              select new
                              {
                                  ID = basket.Id,
                                  ProductID = basket.proid,
                                  BasketID = basket.basketid,
                                  Product = basket.product,
                                  Qty = basket.qty,
                                  SalesPrice = basket.price,
                                  UnitCost = basket.cost,
                                  Total = basket.qty * basket.price,
                              }).ToList();
            return Json(new { Success = true, data = basketlist }, JsonRequestBehavior.AllowGet);
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
}