Как внедрить cтилизованный input number в другой скрипт?

Почему не работает стилизованный input с js кодом расчета на + и -? Работает только с клавиатуры.

//Расчет, умножение
window.addEventListener('load', () => {
   const multiplyInput = document.querySelector('#multiply');
   const resultElements = document.querySelectorAll('.result');

   resultElements.forEach(item => {
      item.setAttribute('data-default-count', item.innerText);
   });

   const calcData = () => {
      resultElements.forEach(item => {
         item.innerText = item.getAttribute('data-default-count') * multiplyInput.value;
      });
   }

   calcData();

   multiplyInput.addEventListener('input', calcData)

})
/////////////////// product +/-
$(document).ready(function() {
  $('.num-in span').click(function () {
      var $input = $(this).parents('.num-block').find('input.in-num');
    if($(this).hasClass('minus')) {
      var count = parseFloat($input.val()) - 1;
      count = count < 1 ? 1 : count;
      if (count < 2) {
        $(this).addClass('dis');
      }
      else {
        $(this).removeClass('dis');
      }
      $input.val(count);
    }
    else {
      var count = parseFloat($input.val()) + 1
      $input.val(count);
      if (count > 1) {
        $(this).parents('.num-block').find(('.minus')).removeClass('dis');
      }
    }
    
    $input.change();
    return false;
  });
  
});
// product +/-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="num-block skin-2">
<div class="num-in">
<span class="minus dis">-</span>
<input id="multiply" type="text" class="in-num" value="1"> <span class="plus">+</span>
</div>
</div>

<div class="result">3</div>
<div class="result">4</div>
<div class="result">6</div>
<div class="result">7</div>
</form>


Ответы (0 шт):