title: Strange alphabetical sorting of checkbox lists
body: <p>I have 4 checkboxes, each representing a region.  Clicking any one of them shows 3 countries relevant to that region. Clicking combinations of the regional checkboxes shows all the relevant countries in-line, but I want
  the list of country checkboxes to always be displayed in alphabetical order.</p>
  
  <p>Strangely my jquery seemed to work for 3 regional checkboxes, but doesn't seem to work for 4.  I just can't see what dumb mistake I'm making and am starting to suspect something more sinister.  Here's my fiddle: <a href="https://jsfiddle.net/m5v7v6kv/" rel="nofollow noreferrer">https://jsfiddle.net/m5v7v6kv/</a></p>
  
  <p>Thanks for any help.</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 sortByText(a, b) {
      return $.trim($(a).text()) &gt; $.trim($(b).text());
  }
  
  var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
  $(".CountryWrapper").append(li)
  
  $('input[type="checkbox"]').click(function() {
      $('.my' + $(this).attr("id")).slideToggle(200)
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.CountryWrapper {
      border: 1px solid blue;
      height: 150px;
      width: 480px;
      border: 1px solid blue;
  }
  .myEuropeCountries {
      display: none;
  }
  .myNAMCountries {
      display: none;
  }
  .mySAMCountries {
      display: none;
  }
  .myAfricaMECountries {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;label&gt;&lt;input type="checkbox" id="EuropeCountries" /&gt;Europe&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" id="NAMCountries" /&gt;North America&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" id="SAMCountries" /&gt;South America&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" id="AfricaMECountries" /&gt;Africa and Middle East&lt;/label&gt;
  
  &lt;div class="CountryWrapper"&gt;
      &lt;br&gt;
      &lt;label class="myEuropeCountries"&gt;&lt;input type="checkbox" value="Spain" /&gt;Spain&lt;/label&gt;
      &lt;label class="myEuropeCountries"&gt;&lt;input type="checkbox" value="Germany" /&gt;Germany&lt;/label&gt;
      &lt;label class="myEuropeCountries"&gt;&lt;input type="checkbox" value="Austria" /&gt;Austria&lt;/label&gt;
      
      &lt;label class="myNAMCountries"&gt;&lt;input type="checkbox" value="USA" /&gt;USA&lt;/label&gt;
      &lt;label class="myNAMCountries"&gt;&lt;input type="checkbox" value="Mexico" /&gt;Mexico&lt;/label&gt;
      &lt;label class="myNAMCountries"&gt;&lt;input type="checkbox" value="Canada" /&gt;Canada&lt;/label&gt;
  
      &lt;label class="mySAMCountries"&gt;&lt;input type="checkbox" value="Brazil" /&gt;Brazil&lt;/label&gt;
      &lt;label class="mySAMCountries"&gt;&lt;input type="checkbox" value="Argentina" /&gt;Argentina&lt;/label&gt;
      &lt;label class="mySAMCountries"&gt;&lt;input type="checkbox" value="Chile" /&gt;Chile&lt;/label&gt;
  
      &lt;label class="myAfricaMECountries"&gt;&lt;input type="checkbox" value="SouthAfrica" /&gt;South Africa&lt;/label&gt;
      &lt;label class="myAfricaMECountries"&gt;&lt;input type="checkbox" value="Egypt" /&gt;Egypt&lt;/label&gt;
      &lt;label class="myAfricaMECountries"&gt;&lt;input type="checkbox" value="SaudiArabia" /&gt;Saudi Arabia&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>