title: Jquery Toggle Class Value Not Getting Picked by Next Jquery Function
body: <p>I have two functions add to favorite, remove from favorite which should work alternatively on clicks... but even though one functions changes the class (and gives the desired effect), the jquery is unable to pick the value of the changed class to run the other function...</p>
  
  <p>html</p>
  
  <pre><code>&lt;a href="#"&gt;&lt;img class="&lt;?php if($favorite == 1){ echo 'alreadyfavorite';} else { echo 'addtofavorite';} ?&gt;" src="../images/system/addtofavorite.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>// On Search Property Results Page - Add to Favorite Button (Heart)
  
          $('.addtofavorite').click(function() {
              alert("add");
              var reference = this;
              $(reference).toggleClass("addtofavorite alreadyfavorite");
  
          });
  
  
          // On Search Property Results Page - Remove from Favorite Button (Heart)
          $('.alreadyfavorite').click(function() {
              alert("delete");
              var reference = this;
              $(reference).toggleClass("addtofavorite alreadyfavorite");
  
      });
  </code></pre>
  
  <p>alert should say add, then css should change then alert should say delete, then css should change, then alert should say yes css should change...</p>
  
  <p>only css is changing but the alert remains the same...</p>