trying to add plus minus to quantity selector but jquery is not working (shopify liquid debut theme)

here is my code:

in product-template.liquid

<div class="product-form__controls-group">
 <div class="product-form__item">
  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
  <div class="qty-box">
   <span class="qty-btn qty-minus">-</span>
   <input type="number" id="Quantity-{{ section.id }}"
   name="quantity" value="1" min="1" pattern="[0-9]*"
   class="product-form__input product-form__input--quantity" data-quantity-input
   >
   <span class="qty-btn qty-plus">+</span>
  </div>
</div>
</div>

in qty.liquid which I include in theme.liquid

<style>
  .qty-btn {
    display: flex;
    cursor: pointer;
    border-top: 1px solid var(--color-border-form);
    border-bottom: 1px solid var(--color-border-form);
    background-color: var(--color-text-field);
    color: var(--color-text-field-text);
    border-radius: 2px;
    line-height: 1.2;
    height: 44px;
    width:30px;
    align-items: center;
    justify-content: center;
  }

  .qty-minus {
    border-left: 1px solid var(--color-border-form);
  }

  .qty-plus {
    border-right: 1px solid var(--color-border-form);
  }

  .qty-box {
      display: flex;
  }
</style>

<script>
  $('.qty-box .qty-btn').on('click', function(){
    var qty = parseInt($(this).parent('.qty-box').find('.product-form__input').val());
    if($(this).hasClass('qty-plus')) {
      qty++;
    }else {
      if(qty > 1) {
        qty--;
      }
    }
    qty = (isNaN(qty))?1:qty;
    $(this).parent('.qty-box').find('.product-form__input').val(qty);
  }); 
</script>

the style is working, the jquery is not, but I see jquery exist by looking into browser console, also there is no error in console, I think I miss out something simple, what is wrong?

i modified the solution from here https://community.shopify.com/c/Shopify-Design/Add-Quantity-Buttons-to-Debut-Theme/td-p/593001

turn out I overlooked the "jQuery not defined" in console, so I include the jQuery file myself

and the problem solved

still I don't quite understand why I have to add the file again, because I am sure jQuery is already defined (I confirmed this by logging the console)