JSFiddle - React, Tailwind, and code Playground

by colorkid

HTML

<div class="row">
  <div class="order__minus">-</div>
  <input type="number" class="order__input-number">
  <div class="order__plus">+</div>
</div>
<div class="row">
  <div class="order__minus">-</div>
  <input type="number" class="order__input-number">
  <div class="order__plus">+</div>
</div>

CSS

.row{
  margin: 20px 0;
}

JavaScript

var numberInput = document.querySelectorAll(".order__input-number");
			var plusButton = document.querySelectorAll(".order__plus");
			var minusButton = document.querySelectorAll(".order__minus");

			for(var i = 0; i < numberInput.length; i++){
				numberInput[i].value = 1;
			}

			for(var i = 0; i < plusButton.length; i++){
				plusButton[i].addEventListener("click", function(event){
					event.target.previousElementSibling.value++;
				});
			}

			for(var i = 0; i < minusButton.length; i++){
				minusButton[i].addEventListener("click", function(event){
					event.target.nextElementSibling.value--;

					if(event.target.nextElementSibling.value == 0){
						event.target.nextElementSibling.value = 1;
					}
				});
			}