I am trying hard to find the problem, here is my ajax code

$(document).ready(function(){
    $(document).on("click", "#addItem", function(e){
        e.preventDefault();
        var form = $(this).closest(".form-submit");
        var id = form.find(".pid").val();
        var name = form.find(".pname").val();
        var price = form.find(".pprice").val();
        var image = form.find(".pimage").val();
        var code = form.find(".pcode").val();

        $.ajax({
            url: "action.php",
            method: "post",
            data: {pid:id, pname:name, pprice:price, pimage:image, pcode:code},
            success:function(response){
            
                $(".alert-message").html(response);
                
                window.scrollTo(20,2);
                load_cart_item_number();
            }
        });
    });

    load_cart_item_number();

    function load_cart_item_number() {
        $.ajax({
            url: "action.php",
            method: "get",
            data: {cartItem: "cart_item"},
            success:function(response){
                $("#cart-item").html(response);
            
            }
        });
    }
});

and HTML form :

<form>
    <input type="hidden" class="pid" value="<?php echo $row['product_id'] ?>">
    <input type="hidden" class="pname" value="<?php echo $row['product_name'] ?>">
    <input type="hidden" class="pprice" value="<?php echo $row['product_price'] ?>">
    <input type="hidden" class="pimage" value="<?php echo $row['product_image'] ?>">
    <input type="hidden" class="pcode" value="<?php echo $row['product_code'] ?>">
    <button id="addItem" class="btn add-to-cart">Add To Cart</button>
</form>

the only problem is add to cart button is not working and there is no error in console showing.