AJAX add to cart button not working on custom loop products woocommerce

I’m building a custom e-commerce website using woocommerce and I’m having some trouble fixing the “add to cart button”. Whenever I add the multiple amounts it only increments or adds one item to the cart. This only happens and I create custom loop.

On the shop and single-product page, it works fine. If I add 10 items and press the add to cart button. It exactly adds 10 items to cart.

Here is the code I have been working on.

<?php
$args = array(
‘post_type’ => ‘product’,
);
$crate_products = new WP_Query($args);

if ($crate_products->have_posts()):
while ($crate_products->have_posts()):
$crate_products->the_post();
?>

<div id=”post-<?php
the_ID() ?>” class=”three columns product-post”>

<?php < figureclass = “featured-image” > < ? php

// Display Product Thumbnail

$product_thumbnail = woocommerce_get_product_thumbnail();
?>

<a href=”<?php
the_permalink() ?>” ><?php
echo $product_thumbnail ?>
</figure>

<h2 class=”product-price”><a href=”<?php
the_permalink(); ?>”><?php
wc_get_template(‘single-product/price.php’); ?></h2>
<span class=”product-name”><?php
the_title(); ?></span>

<?php
woocommerce_quantity_input(); ?>

<div class=”add-to-cart-btn”>
<?php
do_action(‘woocommerce_after_shop_loop_item’); ?>
</div>
?>

</div>

<?php
wp_reset_postdata(); ?>

<?php
endwhile;
else : ?>

<?php
endif; ?>

<?php
wp_reset_query(); ?>

I have already tried applying the solutions from this developer

– https://gist.github.com/claudiosmweb/5114131

and also this one

– https://gist.github.com/webaware/6260468

but it still same output. I really don’t know it only increments one item to the cart.

https://www.ads-software.com/plugins/woocommerce/