I want Grand Total of the selected products

Question

I'm selecting the products from dropdown and selected items are appearing in below table. If I'm increasing the quantity of products the subtotal also increasing accordingly. Now I want the Grand Total of selected products. How can i do it?

 

Here's My code

<div class="col-lg-12">
<table class="table">
<thead>
<tr>
<th scope="col">Product Idth>
<th scope="col">Companyth>
<th scope="col">Product Nameth>
<th scope="col">Price per productth>
<th scope="col">Quantityth>
<th scope="col">Sub Totalth>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="savebutton" >
<input type="button" id="btnSave" value="Save All"/>
</div>
<script>
$('#productSelect').change(function () {
var id = $(this).val();
if (id > 0) {
$.get("GetProduct", { productId: id }, function (result) {
console.log(result)
$("tbody").append("" + result.ProductId + "" + result.CompanyName + "" + result.ProductName + "" + result.ProductPrice + "-"" value="0">0+---x")
});
}
}) function subtract(productId, price) {
var quantity = $("#" + productId + "").text();
quantity = --quantity;
if (quantity > 0) {
$("#" + productId + "").text(quantity);
$("#sum" + productId + "").text(quantity * price);
} else {
$("#" + productId + "").text("0");
$("#sum" + productId + "").text("---");
}
}
function add(productId, price) {
var quantity = $("#" + productId + "").text();
quantity = ++quantity;
$("#" + productId + "").text(quantity);
$("#sum" + productId + "").text(quantity * price); }
</script>