My code is doing fine with only one product. Now i applied append on table to select multiple products. Now my code stops running. i want the "plus and minus" quantity button with each product and when i change the quantity the price will change accordingly.
When increase in quantity results increase in price
Here's my code
<thead>
<tr>
<th scope="col">Company</th>
<th scope="col">Product</th>
<th width="200px">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
</tbody>
<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.CompanyName + "</td> <td>" + result.ProductName + "</td> <td>" + '<div class="input-group"><span class="input-group-btn"><button class="btn btn-default value-control" data-action="minus" data-target="font-size"><span class="glyphicon glyphicon-minus"></span></button></span><input type="text" value="1" class="form-control" id="font-size"><span class="input-group-btn"><button class="btn btn-default value-control" data-action="plus" data-target="font-size"><span class="glyphicon glyphicon-plus"></span></button></span></div>' + "</td> <td>" + result.ProductPrice + "</td> </tr>");
});
}
})
</script>
And here is my Button code
<script>
$(document).on('click', '.value-control', function () {
var price = $(this).closest('tr').find($("#hfPrice")).val();
var action = $(this).attr('data-action')
var target = $(this).attr('data-target')
var value = parseFloat($('[id="' + target + '"]').val());
if (value > 0) {
if (action == "plus") {
value++;
}
if (action == "minus") {
value--;
}
$('[id="' + target + '"]').val(value);
var totalPrice = parseInt(value) * parseFloat(price == '' ? 0 : price);
$(this).closest('tr').find($("#Price")).text(totalPrice.toFixed(2));
}
})
</script>
