На моей веб-странице кнопка добавления в корзину (с главной страницы) не работает

Я создал кнопку добавления в корзину для своего сайта Итак, в Index.html:

                    <button class="btn-action add-to-cart-btn" data-index="{{p.id}}" id="add-to-cart-btn">
                      <input type="hidden" value="1" id="product-quantity" class="product-quantity-{{p.id}}">
                      <input type="hidden" class="product-pid-{{p.pid}}" value="{{p.pid}}" name="">
                      <input type="hidden" class="product-image-{{p.id}}" value="{{p.image}}" name="">
                      <input type="hidden" class="product-id-{{p.id}}" value="{{p.id}}" name="">
                      <input type="hidden" class="product-title-{{p.id}}" value="{{p.title}}" name="">
                      <ion-icon name="bag-add-outline"></ion-icon>
                    </button>

Это кнопка add-to-cart и в function.js:

$(".add-to-cart-btn").on("click",function(){
    let this_val=$(this)
    let index= this_val.attr("data-index")

    let quantity=$("#product-quantity-" + index).val()
    let product_title=$(".product-title-" + index).val()

    let product_id=$(".product-id-" + index).val()
    let product_price = $("#current-product-price-" + index).text()

    let product_pid = $(".product-pid-" + index).text()
    let product_image=$(".product-image-" + index)
    


    console.log("Quantity:", quantity);
    console.log("Id:", product_id);
    console.log("Pid:", product_pid);
    console.log("Image:", product_image);
    console.log("Index:", index);
    console.log("Title:", product_title);
    console.log("Price:", product_price);
    console.log("Current Element:", this_val);

Проблема заключается в следующем: Когда я нажимаю на кнопку add-to-cart, в консоли не отображаются значения

Примечание: Яваскрипт берет значение с главной страницы (индекс) и с другой страницы...........
. и если вам нужен мой views.py:

def add_to_cart(request):
    cart_product={}
    cart_product[str(request.GET['id'])]={
        'title': request.GET['title'],
        'qty': request.GET['qty'],
        'price': request.GET['price'],
    }

    if 'cart_data_obj' in request.session:
        if str(request.GET['id']) in request.session['cart_data_obj']:
            cart_data= request.session['cart_data_obj']
            cart_data[str(request.GET['id'])]['qty']=int(cart_product[str(request.GET['id'])]['qty'])
            cart_data.update(cart_data)
            request.session['cart_data_obj']=cart_data
        else:
            cart_data=request.session['cart_data_obj']
            cart_data.update(cart_product)
            request.session['cart_data_obj']=cart_data
            request.session['total_cart_items'] = len(cart_data)
    else:
        request.session['cart_data_obj']=cart_product
        request.session['total_cart_items'] = len(cart_product)
    return JsonResponse({"data":request.session['cart_data_obj'],'totalcartitems': request.session['total_cart_items']})

Но views.py прекрасно работает

   <input type="hidden" value="1" id="product-quantity-{{p.id}}" 
   class="product-quantity-{{p.id}}">

let quantity = $("#product-quantity-" + index).val();
let product_image = $(".product-image-" + index).attr('value');