In html page onclick and console.log is not working

I created a button on my html page
So, In index.html:

<button class="btn btn-sm btn-remove delete-product" data-product="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>

When I am clicking on this button it is not working In function.js:

$(".delete_product").on("click",function(){
    let product_id=$(this).attr("data_product")
    let this_val=$(this)


    console.log("Product ID:", product_id);
}

and the html page is also linked with js file

So that’s it… What is wrong here???