Unable to change add to cart button using AJAX - php

Question

I am calling product list on click of category button
as follow :
$id = $_GET['ServiceId'];
?>
<ul class="products">
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => $id, 'orderby' => 'rand' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div>
<li class="food_menu">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" />'; ?>
<div class="heading_food">
<h3 class="food_head"><?php the_title(); ?></h3>
<p class="food_head1">Description 1</p>
<p class="food_head1">Description 2</p>
</div>
<div class="price"><?php echo $product->get_price_html(); ?></div>
<div class="qty1" style="width:100%;margin-top:60px">
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</div>
</li>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
It shows me the list of product of that category, It shows a Add to cart button, I want is that if anyone click on this button then it should cahnge to added to cart and add to cart button should be disabled. How can I do this ?

Answer 1

Try this code.I hope, Its will help you..
HTML:
<input type="submit" value="Add to cart" class="add_cart">
Script:
jQuery('.add_cart').on('click', function () {
jQuery(this).prop('disabled', true); // for disabled button
jQuery(this).val('Added to cart'); // for change button as Added to cart
}
Thank You!!