title: JQuery to switch option order on a form
body: <p>I have a form that I need to switch the order of the options in. I need to do it conditionally  (not every time) after the page has loaded and it makes sense to use jquery for this task.</p>
  
  <p>Here's the HTML as it initially renders:</p>
  
  <pre><code>&lt;ol class="choices-group"&gt;
    &lt;li class="choice"&gt;
      &lt;label for="first"&gt;
        &lt;input id="first" type="radio" value="25.0"&gt;$25&lt;/input&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li class="choice"&gt;
      &lt;label for="second"&gt;
        &lt;input id="second" type="radio" value="50.0"&gt;$50&lt;/input&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li class="choice"&gt;
      &lt;label for="third"&gt;
        &lt;input id="third" type="radio" value="100.0"&gt;$100&lt;/input&gt;
      &lt;/label&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>I want the jquery to reverse the order of the elements so it looks like this:</p>
  
  <pre><code>&lt;ol class="choices-group"&gt;
    &lt;li class="choice"&gt;
      &lt;label for="third"&gt;
        &lt;input id="third" type="radio" value="100.0"&gt;$100&lt;/input&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li class="choice"&gt;
      &lt;label for="second"&gt;
        &lt;input id="second" type="radio" value="50.0"&gt;$50&lt;/input&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li class="choice"&gt;
      &lt;label for="first"&gt;
        &lt;input id="first" type="radio" value="25.0"&gt;$25&lt;/input&gt;
      &lt;/label&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>In this example there were three options, but it may be any number between 1 and 7. </p>
  
  <p>Can anyone see a good way to do this?</p>