jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div class="number-input">
  <button class='btn minus'></button>
  <input class="cart-product-price-multiplier" type="number" name="updates[]" id="updates_{{ item.key }}" value="5" min="0">
  <button class="btn plus"></button>
</div>

CSS

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 1px solid #585CD3;
  display: inline-flex;
}

.number-input button {
  outline: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: #585CD3;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  text-align: center;
}

JavaScript

$('.btn').on('click', function() {
		const $input = $('.cart-product-price-multiplier');
		const currentVal = Number($input.val());
		const newVal = $(this).hasClass('minus') ? currentVal - 1 : currentVal + 1;
			$input.val(newVal);
  });