title: Why does jQuery sort() select the wrong option when you append a new option via jQuery
body: <p>I'm looking for clarification on why this issue is happening, and what should be done to avoid this behaviour.</p>
  
  <p>I have a <code>select</code> that will add new options on an event trigger. When this trigger fires I want to create a new <code>option</code> append to the <code>select</code> and then sort all the options in to an order (alphabetical or otherwise, does not matter for this issue). When I do this using the code below, the <code>option</code> is added to the <code>select</code> however the new option becomes selected even though a different <code>option</code> is the "selected" <code>option</code>.</p>
  
  <p><a href="https://codepen.io/brianbest/pen/NWWoLgq" rel="nofollow noreferrer">demo</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var select = $('select');
    select.append("&lt;option value='9'&gt;Nine&lt;/option&gt;"); // This will become selected
    select.html(select.find('option').sort(function(x, y) {
      return $(x).text() &gt; $(y).text() ? 1 : -1;
    }));
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper"&gt;
    &lt;select&gt;
      &lt;option&gt;Choose a number&lt;/option&gt;
      &lt;option value="3"&gt;Three&lt;/option&gt;
      &lt;option value="1"&gt;One&lt;/option&gt;
      &lt;option value="0"&gt;Zero&lt;/option&gt;
      &lt;option value="2" &gt;Two&lt;/option&gt;
      &lt;option value="8" selected="true"&gt;Eight&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Edit</strong>: The issue here is not that the options will be organized in one manner or another. The issue is that <em>after</em> the options are sorted the select displays the wrong option as the selected option. After the JS runs I would expect that Eight is still the selected option. </p>