Identifying a Specific Submit Button in AjaxForm

Identifying a Specific Submit Button in AjaxForm

Hello- I'm using Django and AjaxForm to submit a form(s) that adds an item to a user's "cart". I have multiple items listed on the page, each with it's own "add to cart" button. Upon clicking a specific "add to cart" button, I use Ajax to add the item to the user's "cart" and display it in their "cart" at the top of the screen. Users can also delete an item from their cart by clicking on a given item in the cart.

I would now like to change the appearance of the "add to cart" button once it has been clicked, but I am having trouble identifying only the specific button that was clicked (and not all of the 'add to cart' buttons). How can I identify which 'add to cart' button was clicked. I added an 'id' field to my html button and have been trying to use that but have been unsuccessful....??

I have tried many different things but either they are not working or I am putting them in the wrong spot. For example, I have tried:
  1.     $('.add-to-cart').on('click',function(){
  2.         var id = $(this).attr("id");
  3.         console.log("ID: ");
  4.         console.log(id);
  5.     });
And also:
  1.             var addButtonID;
  2.             $(this).find('input[type=submit]').click(function() {
  3.                 addButtonId = this.id;
  4.                 console.log("ID: ");
  5.                 console.log(addButtonId)

Any ideas on how I can find the specifc button that was clicked so I can update the button's appearance???

My html:
  1. {% for item in item_list %}             
  2.       <form class="add-to-cart" action="/item/add/{{ item.id }}/" method="post" enctype="application/x-www-form-urlencoded">
  3.       <ul>
  4.             <li style="display: block"><button class="addItemButton2" type="submit" id="{{ item.id }}">Add to Cart</button></li>
  5.       </ul>
  6.       </form>
My javascript:
  1. function remove_form_errors() {
  2.     $('.errorlist').remove();
  3. }
  4. function show_hide_cart(){
  5.     var cart = $('#cart');
  6.     var message = $('#message');
  7.     if (cart.find('li').length >= 1){
  8.         cart.show();
  9.         continueButton.show();
  10.         message.hide();
  11.     }
  12.     else {
  13.         cart.hide();
  14.         continueButton.hide();
  15.         message.show();
  16.     }
  17. }
  18.        
  19. function process_form_errors(json, form)
  20. {
  21.     remove_form_errors();
  22.    
  23.     var prefix = form.data('prefix'),
  24.     errors = json.errors;
  25.     if (errors.__all__ !== undefined) {
  26.         form.append(errors.__all__);
  27.     }
  28.     prefix === undefined ? prefix = '' : prefix += '-';
  29.     for (field in errors)
  30.     {
  31.         $('#id_' + prefix + field).after(errors[field])
  32.         .parents('.control-group:first').addClass('error');
  33.     }
  34. }
  35. function assign_remove_from_cart() {
  36.     var cart = $('#cart');
  37.     $('.remove-from-cart').on('click', function(e) {
  38.         e.preventDefault();
  39.         $.get(this.href, function(json) {
  40.             remove_form_errors();
  41.             cart.find('a[href$="' + json.slug + '/"]').parent('li').remove();
  42.             show_hide_cart();
  43.         });
  44.     });
  45. }
  46. (function($){
  47.     $(function() {
  48.         var cart = $('#cart'),
  49.             message = $('#message');
  50.             continueButton = $('#continueButton');  
  51.        
  52.         assign_remove_from_cart();
  53.         // ajax-enable the "add to cart" form
  54.         $('.add-to-cart').ajaxForm({
  55.             dataType: 'json',
  56.             url: this.action,
  57.             success: function(json, status, xhr, form) {
  58.                 if (json.errors !== undefined) {
  59.                     // display error message(s)
  60.                     process_form_errors(json, form);
  61.                 }
  62.                 else if(json.id == -1){
  63.                     // duplicate, do nothing
  64.                     console.log("json.id:%s:json.slug:%s", json.id, json.slug)
  65.                 }
  66.                 else {
  67.                     // Hide any previously displayed errors
  68.                     remove_form_errors();
  69.                     // compile cart item template and append to cart
  70.                     var t = _.template($('#cart-item-template').html());
  71.                     $('#cart').append(t(json));
  72.                     show_hide_cart();
  73.                     assign_remove_from_cart();
  74.                 }
  75.             }
  76.         });
  77.     });
  78. })(jQuery);