<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>

<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // add one to the current value
  $input.val(val + 1);
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});

// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // minus one from the current value while it's more than one
  // the value never goes below 1
  $input.val(Math.max(val - 1, 1));
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});
</script>

<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// Increment
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
  $input[0].dispatchEvent(new Event('change'));
});

// Decrement
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
  $input[0].dispatchEvent(new Event('change'));
});
</script>