'İ can't pull data with JavaScript

I want to pull data using JavaScript and show it in console. I don't know what I did wrong.

main.js

// ADD TO CART
$("#addToCartBtn").on('click',function(){
  var _qty=$("#productQty").val();
  var _productId=$(".product-id").val();
  var _productName=$(".product-name").val();
  console.log(_productId,_productName,_qty);
});

I am using django framework to write backend

detail.html

<div class="product-btns">
    <div class="qty-input">
        <span class="text-uppercase">Ədəd: </span>
        <input class="input" type="number" value="1" id="productQty">
    </div>
    <input type="hidden" class="product-id" value="{{product.id}}">
    <input type="hidden" class="product-name" value="{{product.name}}">
    <button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart" id="addToCartBtn"></i> Səbətə at</button>
</div>


Solution 1:[1]

The problem is probably that the element that has id="addToCartBtn" is not really the button but the <i> element - which has no content and therefore no width. So it is never clickable.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Remirror