eventlistener not functioning when post request is sent

Question

I am trying to add a number indicator to my cart icon that will display the number of items added after the product has been saved to my database.

<div class="main__section-content">
               <% if( allProd.length > 0 ) {%>

                <% for(product of allProd){%>
                    <article class="main__section-card">
                        <img src="<%= product.imageUrl %>" alt="<%= product.title %>" class="card-img">
                        <section class="card-container">
                            <h4><%= product.title %> </h4>
                            <p>$ <%= product.price %></p>
                            <form action="/cart" method="post" class="card-form">
                                <input type="hidden" name="productId" value="<%= product._id %>">
                                <button class="card-btn" type="submit" >Add to cart</button>
                            </form>
                        </section>
                    </article>
                    <%} %>
                <%} %>
            </div>

I am trying to attach an eventlistener to all

Add to cart button

 const addToCartBtn = document.querySelectorAll('.card-btn');
    addToCartBtn.forEach(btn => {
        btn.addEventListener('click', (e)=>{
      e.preventDefault();     
 console.log('btn');
        })
    });

nothing comes out of the console before the post request is sent.

this is how i handle the post request

exports.postCart = (req, res) => {
    const prodId = req.body.productId;
    Product.findById(prodId)
    .then(product =>{
        return req.user.addToCart(product);
    })
    .then(result => {
        console.log(result);
        res.redirect('/')
    }).catch(err => console.log(err));
};

please help!