title: How do I sort <li> by <option> value?
body: <p>I'm trying to sort a ul by the value assigned by the option in the select tag.</p>
  
  <pre><code>&lt;ul style="list-style-type: none;"&gt;
  
    &lt;li&gt;MCF3M0 - Functions and Applications&lt;/li&gt;
    &lt;select value="MCF3M0"&gt;
      &lt;option value="1"&gt;1 Star&lt;/option&gt;
      &lt;option value="2"&gt;2 Stars&lt;/option&gt;
      &lt;option value="3"&gt;3 Stars&lt;/option&gt;
      &lt;option value="4"&gt;4 Stars&lt;/option&gt;
      &lt;option value="5"&gt;5 Stars&lt;/option&gt;
    &lt;/select&gt;
    &lt;li&gt;BDI3C0 - Entrepreneurship: The Venture&lt;/li&gt;
    &lt;select value="BDI3C0"&gt;
      &lt;option value="1"&gt;1 Star&lt;/option&gt;
      &lt;option value="2"&gt;2 Stars&lt;/option&gt;
      &lt;option value="3"&gt;3 Stars&lt;/option&gt;
      &lt;option value="4"&gt;4 Stars&lt;/option&gt;
      &lt;option value="5"&gt;5 Stars&lt;/option&gt;
    &lt;/select&gt;
    &lt;li&gt;FSF3U0 - Core French&lt;/li&gt;
    &lt;select value="FSF3U0"&gt;
      &lt;option value="1"&gt;1 Star&lt;/option&gt;
      &lt;option value="2"&gt;2 Stars&lt;/option&gt;
      &lt;option value="3"&gt;3 Stars&lt;/option&gt;
      &lt;option value="4"&gt;4 Stars&lt;/option&gt;
      &lt;option value="5"&gt;5 Stars&lt;/option&gt;
    &lt;/select&gt;
    &lt;li&gt;SPH3U0 - Physics&lt;/li&gt;
    &lt;select value="SPH3U0"&gt;
      &lt;option value="1"&gt;1 Star&lt;/option&gt;
      &lt;option value="2"&gt;2 Stars&lt;/option&gt;
      &lt;option value="3"&gt;3 Stars&lt;/option&gt;
      &lt;option value="4"&gt;4 Stars&lt;/option&gt;
      &lt;option value="5"&gt;5 Stars&lt;/option&gt;
    &lt;/select&gt;
  &lt;/ul&gt;
  &lt;button type="submit"&gt;Submit Ratings&lt;/button&gt;
  </code></pre>
  
  <p>I'm trying to sort these course by a user assigned rating. A javascript function that will help sort AND display a new list of the ranked courses would be greatly appreciated.</p>