I have been working on a feature to display a calculated price based on the selected quantity for each individual product. I attempted to duplicate the code and modify variable names, but encountered issues with the increase/decrease buttons triggering multiple outputs.
Below is the current code snippet:
$(".incr-btn_mobile").on("click", function(e) {
var $button = $(this);
var oldValue = $button.parent().find('.quantity').val();
$button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
if ($button.data('action') == "increase") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Ensure quantity does not go below 1
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
$button.addClass('inactive');
}
}
$button.parent().find('.quantity').val(newVal);
var cakePrice = newVal;
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = "= $" + (cakePrice) * 7.99;
e.preventDefault();
});.count-input_mobile {
position: relative;
max-width: 1000%;
max-width: 400px;
margin: 0px 0;
}
/* CSS styles omitted for brevity */
.button_mobile {
border: 1px solid #000;
border-radius: 2px;
background: none;
padding: 10px 32px;
width: 100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML markup omitted for brevity -->
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
<input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
<a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>
<td>
<div id="totalPrice">=$7.99</div>
</td>
<!-- Additional instances of count-input elements -->
I am considering creating a new function that uses .incr-btn_mobile_2 instead, but I am open to suggestions for a more efficient solution to avoid redundant css additions.