JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<div class="counter">
    <button class="adult-minus" id="adult-minus">минус</button>
    <input type="text" name="people-count" class="adult-counter js-test" id="adult-counter" value="0">
    <button class="adult-plus" id="adult-plus">плюс</button>
    <div class="data"></div>
</div>
<div class="counter">
    <button class="adult-minus" id="adult-minus">минус</button>
    <input type="text" name="people-count" class="adult-counter" id="adult-counter" value="0">
    <button class="adult-plus" id="adult-plus">плюс</button>
    <div class="data"></div>
</div>

JavaScript

var counters = document.querySelectorAll('.counter'),
    countersArray = Array.prototype.slice.call(counters);
   

// Array.prototype.forEach.call(counters, addCountEngine);

// function addCountEngine(node) {
//   console.log(node);
//   console.log(arguments);
// };

countersArray.forEach(function(item, i){
  
  var adultMinus = item.querySelector(".adult-minus");
  var adultPlus = item.querySelector(".adult-plus");
  var couterInput = item.querySelector(".adult-counter");
  var parentElem = item.querySelector('.data');
  
  couterInput.addEventListener('keydown', function(e) {
    var keyCode = e.keyCode;
    
    // Prevent non digit keys
    if (keyCode < 48 || keyCode > 57) {
      e.preventDefault();
    }
    
  });

  if (adultMinus) {
    adultMinus.addEventListener("click", function(event) {
      var input = this.parentNode.querySelector('input');

      if (isNumeric(input.value)) {
        event.preventDefault();
        if (input.value > 0) {
          input.value--;
        }
      }
    });
  }

  if (adultPlus) {
    adultPlus.addEventListener("click", function(event) {
      var input = this.parentNode.querySelector('input');

      if (isNumeric(input.value)) {
        event.preventDefault();
        input.value++;
      }
    });
  }  
  
})

function isNumeric(n) {
  
  return !isNaN(parseFloat(n)) && isFinite(n);
}