JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="quantity">
	<input type="number" value="1" min="1">
	<button type="button" class="input-action" data-action="plus">plus</button><button type="button" class="input-action" data-action="">minus</button>
  <span class="price" data-price="1500">1 500</span> <span class="currrency">$</span>
</div>
<div class="quantity">
	<input type="number" value="1" min="1">
	<button type="button" class="input-action" data-action="plus">plus</button><button type="button" class="input-action" data-action="">minus</button>
  <span class="price" data-price="1500">1 500</span> <span class="currrency">$</span>
</div>
<div class="quantity">
	<input type="number" value="1" min="1">
	<button type="button" class="input-action" data-action="plus">plus</button><button type="button" class="input-action" data-action="">minus</button>
  <span class="price" data-price="1500">1 500</span> <span class="currrency">$</span>
</div>

CSS

.quantity {
  margin: 10px;
  padding: 10px;
  border: 1px solid #cdcdcd;
}

JavaScript

$('.quantity .input-action').on('click', function() {
	let $input = $(this).closest('.quantity').find('[type="number"]');
  let $price = $(this).closest('.quantity').find('.price');
	let curVal = parseInt($input.val());
  
  curVal = $(this).data('action') === 'plus' ? curVal += 1 : curVal -= 1;
  
  if (curVal <= 1) {
  	curVal = 1
  }
  
  $input.val(curVal);
  
  $price.text(curVal * parseInt($price.data('price')));
});