title: Swap content of 2 li's based on user selection
body: <p>I'm trying to swap list item content. First I click on one li and then I click on another and swap their content. It works the first time I try to exchange them, but each time after, it swaps the li's original content, not its new content. Here is the <a href="http://jsfiddle.net/Vm7Uq/27/" rel="nofollow">JSFiddle</a>. </p>
  
  <pre><code>&lt;ul class="icecream"&gt;
      &lt;li class="favorite" data-position="1" data-name="neopolitan"&gt;Neopolitan&lt;/li&gt;
      &lt;li class="favorite" data-position="2" data-name="mintchip"&gt;Mint Chip&lt;/li&gt;
      &lt;li class="favorite" data-position="3" data-name="vanilla"&gt;Vanilla&lt;/li&gt;
      &lt;li class="option" data-position="NA" data-name="chocolate"&gt;Chocolate&lt;/li&gt;
      &lt;li class="option" data-position="NA" data-name="cookiesncream"&gt;Cookies'n'Cream&lt;/li&gt;
      &lt;li class="option" data-position="NA" data-name="rockyroad"&gt;Rocky Road&lt;/li&gt;
  &lt;/ul&gt;
  
  $(document).on("click",  "ul.icecream&gt;li" , function(){
       if($("ul.icecream&gt;li").hasClass("active")){
           if($(this).hasClass("subactive")){
               $(this).removeClass("subactive");
           }
           else{
               var p1_name = $("ul.icecream&gt;li.active").data("name");
               var p_name = $(this).data("name");
               $(this).attr("data-name", p1_name).text(p1_name);
               $("ul.icecream&gt;li.active").attr("data-name", p_name).text(p_name).removeClass("active");
           }
       }
       else{
           $(this).addClass("active");
       }
   });
  </code></pre>