title: jquery addclass, removeclass and appendTo
body: <p>I have a bit of a problem, I'm trying to work out a sort of options inside a div, that when clicked, appendTo another div, in case they get clicked again in the other div they will go back and so on... here is my code:</p>
  
  <pre><code>    $(".selectable").bind('click', function(){
          $(this).removeClass("selectable").addClass("unselectable").appendTo('#selectableQuitar');
      });
  
      $(".unselectable").bind('click', function(){
      $(this).removeClass("unselectable").addClass("selectable").appendTo('#selectableAgregar');  
    });
  </code></pre>
  
  <p>I tried plenty of ways around, when you click the first element it will change classes and appendTo the next div, exactly the other way around... the first click actually works but the second one not exactly, if you Inspect the Element it will show the new class but the click event will not trigger... any ideas?? just in case you need more info, the divs and elements inside: </p>
  
  <pre><code>&lt;div id="pruebaSelectableAgregar"&gt;
  &lt;ol id="selectable" class="prueba"&gt;
    &lt;li class="selectable"&gt;Item 1&lt;/li&gt;
    &lt;li class="selectable"&gt;Item 2&lt;/li&gt;
    &lt;li class="selectable"&gt;Item 3&lt;/li&gt;
    &lt;li class="selectable"&gt;Item 4&lt;/li&gt;
    &lt;li class="selectable"&gt;Item 5&lt;/li&gt;
    &lt;li class="selectable"&gt;Item 6&lt;/li&gt;
  &lt;/ol&gt;
  &lt;/div&gt;
  
  &lt;div id="pruebaSelectableQuitar"&gt;
      &lt;ol id="selectableQuitar"&gt;
          &lt;li class="unselectable"&gt; Prueba 1&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>