title: Change class on click based on current class
body: <p>I want to take a simple FontAwesome icon:</p>
  
  <pre><code>&lt;div class="emotion"&gt;
      &lt;i class="fa fa-smile-o"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and swap the class depending on what the current class is:</p>
  
  <pre><code>$(".emotion .fa-smile-o").click(function (){
      $(this).removeClass('fa-smile-o').addClass("fa-meh-o");
  });
  $(".emotion .fa-meh-o").click(function (){
      $(this).removeClass('fa-meh-o').addClass("fa-frown-o");
  });
  $(".emotion .fa-frown-o").click(function (){
      $(this).removeClass('fa-frown-o').addClass("fa-smile-o");
  });
  </code></pre>
  
  <p>But currently this only works for the first class change. What am I doing wrong?</p>