title: Adding and removing class from buttons in ajax script
body: <p>I have the following jQuery/ajax script:</p>
  
  <pre><code>jQuery("input.button").click(function(){
     jQuery.ajax({       
        url: 'addfav.php',
        type: 'POST',
        data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1},
        success: function(html) {
          jQuery(this).removeClass('before');
          jQuery(this).addClass('after');
          jQuery(this).attr('disabled', 'disabled');
        }, 
        error: function() {
          jQuery('#error').html('&lt;div&gt;Error! Unable to add food item.&lt;/div&gt;');
        }
      });
  });
  </code></pre>
  
  <p>Which handles clicking on buttons such as these:</p>
  
  <pre><code>&lt;div id="32"&gt;&lt;input type="button" class="button before"/&gt;&lt;/div&gt;
  &lt;div id="33"&gt;&lt;input type="button" class="button before"/&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The adding and removing of classes to whichever but is clicked does not work however.  It works for a single button with an ID, i.e.:</p>
  
  <pre><code>jQuery("input#button1").click(function(){
  </code></pre>
  
  <p>But not when I use classes.  What changes do I need to make to get this script to add or remove classes to whichever button is clicked when I just use a class for the button?</p>