JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-super-counter" data-step="2" data-min="-10" data-max="100">
  <button class="decrease">-</button>
  <input type="text" value="42">
  <button class="increase">+</button>  
</div>

JavaScript

(function(){
  let $wrapper = $('.my-super-counter'),
      $input = $wrapper.find('input'),
      $increase = $wrapper.find('.increase'),
      $decrease = $wrapper.find('.decrease'),
      min = parseInt($wrapper.data('min')),
      max = parseInt($wrapper.data('max')),
      step = parseInt($wrapper.data('step'))

      $increase.on('click', function() {
        let val = parseInt($input.val()),
            newVal = val + step > max ? max : val + step
        $input.val(newVal)
      })
      $decrease.on('click', function() {
        let val = parseInt($input.val()),
            newVal = val - step < min ? min : val - step
        $input.val(newVal)
      })
})()