Not Getting value of “Quantity” and “Grand Total”

Question

I've inserting the table's data in my view to database two tables i.e "sales" and "saleitems". I'm getting all the values from table except "Quantity" and "Grand Total". In quantity i have bootstrap "Plus and Minus" button so that i can increase or decrease the quantity. So i want to get that live quantity value. How can i get them please help.

 

Here's my view code

<table id="table" class="table">
<thead>
<tr>
<th scope="col">Product Id</th>
<th scope="col">Company</th>
<th scope="col">Product Name</th>
<th scope="col">User Name</th>
<th scope="col">User Mobile</th>
<th scope="col">Price per product</th>
<th scope="col">Quantity</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody></tbody>
<tfoot><tr><td colspan="2">Grand Total : </td><td id="GrandTotal"></td></tr></tfoot>
</table>
</div>
</div>
<div class="savebutton" >
<input type="button" id="btnSave" value="Save All"/>
</div> </div>
<script>
$('#productSelect').change(function () {
var id = $(this).val();
if (id > 0) {
$.get("GetProduct", { productId: id }, function (result) {
console.log(result)
$("tbody").append("<tr><td>" + result.ProductId + "</td><td>" + result.CompanyName + "</td><td>" + result.ProductName + "</td><td>" + result.UserName + "</td><td>" + result.UserMobile + "</td><td>" + result.ProductPrice + "</td><td><button type='button' class='btn btn-primary' onClick='subtract(" + id + "," + result.ProductPrice + ")'>-</button><button type='button' class='btn btn-dark' id='" + id + "' value='0'>0</button><button type='button' class='btn btn-primary' onClick='add(" + id + "," + result.ProductPrice + ")'>+</button></td><td id='sum" + id + "'>0</td><td><a onclick='removeRow(this)'>x</a></td></tr>")
CalculateGrandTotal();
});
}
})
$("body").on("click", "#btnSave", function () {
//Loop through the Table rows and build a JSON array.
var sales = new Array();
var saleitems = new Array();
$(".table tbody tr").each(function () {
var row = $(this);
var Sale = {};
var SaleItem = {};
Sale.UserName = row.find("td").eq(3).html();
Sale.UserMobile = row.find("td").eq(4).html();
Sale.NetTotal = row.find("td").eq(8).html();
sales.push(Sale);
SaleItem.ProductId = row.find("td").eq(0).html();
SaleItem.ProductName = row.find("td").eq(2).html();
SaleItem.ProductQuantity = row.find("td").eq(7).val();
saleitems.push(SaleItem);
});
var model = { sales:sales , saleitems:saleitems };
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: "/Product/Insertsales",
data: JSON.stringify(model),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " records inserted.");
}
});
});
</script>

And Here's my Controller code

public JsonResult InsertSales(List<Sale> sales , List<SaleItem> saleitems)
{
using (sampledb6Entities sampledb6Entities = new sampledb6Entities())
{
//Truncate Table to delete all old records.
//sampledb6Entities.Database.ExecuteSqlCommand("TRUNCATE TABLE [Sales]");
//Check for NULL.
if (sales == null)
{
sales = new List<Sale>(); }
//Loop and insert records.

foreach (Sale sale in sales)
{
sampledb6Entities.Sales.Add(sale);
sampledb6Entities.SaveChanges();
}
//Check for NULL.
if (saleitems == null)
{
saleitems = new List<SaleItem>();
}
var SaleIds = sales.Select(x => x.SaleId).ToList();
int Counter = 0;
foreach (SaleItem saleitem in saleitems) {
SaleItem si = new SaleItem();
si.SaleId = SaleIds[Counter];
si.ProductName = saleitem.ProductName;
si.ProductQuantity = saleitem.ProductQuantity;
si.ProductId = saleitem.ProductId;
sampledb6Entities.SaleItems.Add(saleitem);
Counter++;
}
int insertedRecords = sampledb6Entities.SaveChanges();
return Json(insertedRecords);
}
}