On click move option to next select
<p>I would like to move each option on click to next select, here is what currently I have got:</p>

<pre><code>&lt;form action="#" method="get"&gt;
&lt;select multiple name="players" id="players"&gt;
    &lt;option value="player"&gt;player&lt;/option&gt;
    &lt;option value="player1"&gt;player1&lt;/option&gt;
    &lt;option value="player2"&gt;player2&lt;/option&gt;
&lt;/select&gt;


&lt;select multiple name="team" id="teams"&gt;
    &lt;option value="team"&gt;team&lt;/option&gt;
    &lt;option value="team1"&gt;team1&lt;/option&gt;
    &lt;option value="team2"&gt;team2&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p></p>

<pre><code>  $('#players option').each(function() {
  $(this).click(function() {
  $(this).appendTo('#teams');
  });
});

  $('#teams option').each(function() {
  $(this).click(function() {
  $(this).appendTo('#players');
  });
});
</code></pre>

<p>The problem is when I click on already appended element, it just don't want to move to "original" select. How to fix it?</p>

<p>Demo: <a href="http://jsbin.com/ujugej/4/edit" rel="nofollow">http://jsbin.com/ujugej/4/edit</a></p>
