title: jquery reorder li on click
body: <p>I have the below jquery which prepends the clicked menu item to the top of the unordered list.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
      &lt;li&gt;5&lt;/li&gt;
  &lt;/ul&gt;
  
  $('li').on('click', function() {
      $(this).parent().prepend(this);
  });
  </code></pre>
  
  <p>What I want to have happen instead of moving it to the top of the list I want to place it after the next item I click on in the list.  For example if I click on 2 then 3 the list item with the value of 2 would move after 3 in the list so the html would look like this.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
      &lt;li&gt;5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have attempted to do this with the below jQuery <a href="http://jsfiddle.net/mUHLA/" rel="nofollow">see fiddle</a>, this works the first time I click on 2 then 3 but it doesn't work if you continue to click.  How can this be achieved?</p>
  
  <pre><code>$('li').on('click', function() {
      var test = this;
      console.log($(this).text());
      $('li').on('click', function() {
          $(this).after(test);
      });
      //$(this).parent().prepend(this);
  });
  </code></pre>