Hi Team
I have table and the problem with this table has a default value of 5 this is wrong and it has to be 0. But incrementing is also a problem because it jump in between adding item e.g add 1 jump to 3 not 2. How do i fix this issue from my jquery side?
// html code
<div class="col-lg-3 col-6 text-right">
<a href="#" class="btn border">
<i class="fas fa-shopping-cart text-primary"></i>
<span class="badge">0</span>
</a>
</div>
<div class="container-fluid pt-5">
<div class="row px-xl-5">
<div class="col-lg-8 table-responsive mb-5">
<table class="table table-bordered text-center mb-0">
<thead class="bg-secondary text-dark">
<tr>
<th>Products</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Remove</th>
</tr>
</thead>
<tbody class="align-middle">
<tr>
<td class="align-middle"><img src="img/product-1.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">R150</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="1">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">R150</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-2.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">R150</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="1">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">R150</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-3.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">R150</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="1">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">R150</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-4.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">R150</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="1">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">R150</td>
<td class="align-middle"><button class="btn btn-sm btn-primary"><i class="fa fa-times"></i></button></td>
</tr>
<tr>
<td class="align-middle"><img src="img/product-5.jpg" alt="" style="width: 50px;"> Colorful Stylish Shirt</td>
<td class="align-middle">R150</td>
<td class="align-middle">
<div class="input-group quantity mx-auto" style="width: 100px;">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-minus" >
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control form-control-sm bg-secondary text-center" value="1">
<div class="input-group-btn">
<button class="btn btn-sm btn-primary btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</td>
<td class="align-middle">R150</td>
<td class="align-middle"><button class="btn btn-sm btn-primary btn-remove"><i class="fa fa-times"></i></button></td>
</tr>
</tbody>
</table>
</div>
// jquery side
$(document).ready(function() {
// Add to cart button click event
$('.btn-plus').on('click', function(e) {
e.preventDefault();
var quantityInput = $(this).closest('.quantity').find('input');
var quantityValue = parseInt(quantityInput.val());
// Increase quantity value and update input
quantityInput.val(quantityValue + 1);
// Update cart value and total
updateCart();
});
// Remove from cart button click event
$('.btn-minus').on('click', function(e) {
e.preventDefault();
var quantityInput = $(this).closest('.quantity').find('input');
var quantityValue = parseInt(quantityInput.val());
// Decrease quantity value and update input
if (quantityValue > 0) {
quantityInput.val(quantityValue - 1);
// Update cart value and total
updateCart();
}
});
// Function to update cart value and total
function updateCart() {
var cartValue = 0;
var cartTotal = 0;
// Loop through each product row
$('tbody tr').each(function() {
var quantityInput = $(this).find('input');
var quantity = parseInt(quantityInput.val());
var price = parseFloat($(this).find('.align-middle:nth-child(2)').text().replace('R', ''));
// Set cart value to the sum of all quantity values
cartValue += quantity;
// Calculate the total price for this row and add it to the cart total
var rowTotal = quantity * price;
cartTotal += rowTotal;
// Update the total for this row
$(this).find('.align-middle:nth-child(4)').text('R' + rowTotal.toFixed(2));
});
// Update cart value and total in the HTML
$('.badge').text(cartValue);
$('.cart-total').text('R' + cartTotal.toFixed(2));
}
// Initialize the cart value and total on page load
updateCart();
});