JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<form>
  <ul>
    <li>
      <button type="button" class="minus">-</button>
      <input class="qty" min="0" max="6" step="1" type="number" name="q1" />
      <button type="button" class="plus">+</button>
    </li>
  </ul>
</form>

JavaScript

var plus_minus_obj = document.querySelectorAll('.plus, .minus');

for (var l = 0; l < plus_minus_obj.length; l++) {

  var pm_el = plus_minus_obj[l];

  pm_el.addEventListener("click", function(ev) {

    ev.preventDefault();

    // Quantity.
    var $quantityBox;
    
    var $quantitySelector = '.qty';

    $quantityBox = ev.target.parentElement.querySelector($quantitySelector);

    // Get values.
    var $currentQuantity = parseFloat($quantityBox.value),
      $maxQuantity = parseFloat($quantityBox.getAttribute('max')),
      $minQuantity = parseFloat($quantityBox.getAttribute('min')),
      $step = parseFloat($quantityBox.getAttribute('step')),
      checkStepInteger = Number.isInteger($step),
      finalValue;

    // Fallback default values.
    if (!$currentQuantity || '' === $currentQuantity || 'NaN' === $currentQuantity) {
      $currentQuantity = 0;
    }
    if ('' === $maxQuantity || 'NaN' === $maxQuantity) {
      $maxQuantity = '';
    }

    if ('' === $minQuantity || 'NaN' === $minQuantity) {
      $minQuantity = 0;
    }
    if ('any' === $step || '' === $step || undefined === $step || 'NaN' === $step) {
      $step = 1;
    }

    // Change the value.
    if (ev.target.classList.contains('plus')) {

      if ($maxQuantity && ($maxQuantity == $currentQuantity || $currentQuantity > $maxQuantity)) {
        $quantityBox.value = $maxQuantity;
      } else {
        finalValue = $currentQuantity + parseFloat($step);
        $quantityBox.value = checkStepInteger ? finalValue : (finalValue).toFixed(1);
      }

    } else {

      if ($minQuantity && ($minQuantity == $currentQuantity || $currentQuantity < $minQuantity)) {
        $quantityBox.value = $minQuantity;
      } else if ($currentQuantity > 0) {
        finalValue = $currentQuantity - parseFloat($step);
        $quantityBox.value = checkStepInteger ? finalValue : (finalValue).toFixed(1);
      }

    }


    // Trigger the change event on the input.
    var changeEvent = new...