php - Unable to change add to cart button using AJAX -

i 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 list of product of category, shows add cart button, want if click on button should cahnge added cart , add cart button should disabled. how can ?

try code.i hope, you..

html:

<input type="submit" value="add cart" class="add_cart"> 

script:

jquery('.add_cart').on('click', function () {     jquery(this).prop('disabled', true); // disabled button     jquery(this).val('added cart'); // change button added cart } 

thank you!!