I have a number input controlled by (+) and (-) buttons. I added a unit label after the number with a span following the input, but now am having trouble figuring out how to pluralize the unit when you increase the number from 1 item --> 2 items
Is there an easy way to do this? (i'm a beginner)
$(document).ready(function() {
$(".panel-calc").on("input", ".quantity", function() {
var quantity = +$(this).val();
})
var $buttonPlus = $('.plus-button');
var $buttonMin = $('.minus-button');
var $quantity = $('.quantity');
/*For plus and minus buttons*/
$buttonPlus.click(function() {
$quantity.val(parseInt($quantity.val()) + 1).trigger('input');
});
$buttonMin.click(function() {
$quantity.val(Math.max(parseInt($quantity.val()) - 1, 1)).trigger('input');
});
}).widget {
text-align: center;
padding: 40px;
}
input {
text-align: center;
width: 40px;
border: none;
text-align: right;
}
.label {
padding-right: 35px;
font-family: sans-serif;
font-size: 13px;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="widget">
<! --- plus minus interactive --->
<button type="button" class="minus-button">-</button>
<input type="text" class="quantity" value="1"><span class="label"> item</span>
<button type="button" class="plus-button">+</button>
</div>