Ajax add to cart with quantity is working only once for my woocommerce website - Solution

Quantity - custom - woocommerce

YouTube Channel: BG Web Agency: https://www.youtube.com/channel/UC5meqZ4An3SU4-1Wd_sX1Vw

// HTML

<div class="quantity">
  <input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
  <span class="inputIcon" data-type="plus"><i class="fa fa-caret-up"></i></span>
  <span class="inputIcon" data-type="minus"><i class="fa fa-caret-down"></i></span>
</div>

//STYLES

.inputIcon {
  color: #fff;
  text - align: center;
  width: 17px;
  height: 18px;
  display: inline - block;
  font - size: 18px;
  line - height: 14px;
  font - weight: 700;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.inputIcon[data - type= "minus"] {
  top: 22px;
}

select {
  -webkit - appearance: none;
  -moz - appearance: none;
}

select:: -ms - expand {
  display: none;
}
input[type = number] {
  -moz - appearance: textfield;
}

input[type = number]:: -webkit - inner - spin - button,
  input[type = number]:: -webkit - outer - spin - button {
  -webkit - appearance: none;
  margin: 0;
}

//JS

jQuery(document).on('click', '.inputIcon', function () {

  fieldName = jQuery(this).attr('data-field');
  type = jQuery(this).attr('data-type');
  var input = jQuery(this).siblings('input');
  var currentVal = parseInt(input.val());

  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > 1) {
        input.val(currentVal - 1).change();
      }

    } else if (type == 'plus') {

      input.val(currentVal + 1).change();

    }
  } else {
    input.val(0);
  }
});