Sort div by span class
<p><em>EDIT</em>
I have this working in fiddle <a href="http://jsfiddle.net/gandjyar/HM67V/" rel="nofollow">http://jsfiddle.net/gandjyar/HM67V/</a> but can't get it working outside of fiddle... ideas?</p>

<p>I have the following code:</p>

<pre><code>&lt;div id="sort"&gt;
  &lt;p&gt;Sort Communities By: &lt;a href="#"&gt;North&lt;/a&gt; | &lt;a href="#"&gt;South&lt;/a&gt; | &lt;a href="#"&gt;East&lt;/a&gt; | &lt;a href="#"&gt;West&lt;/a&gt; | &lt;a href="#"&gt;ALL&lt;/a&gt;
  &lt;/p&gt;
&lt;/div&gt;
&lt;div class="fp-floorplans"&gt;
  &lt;div id="fp-link"&gt;
    &lt;a href="#"&gt;Community 1&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location"&gt;
    &lt;span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name"&gt;Loation:&lt;/span&gt;
    &lt;span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value"&gt;South&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools"&gt;
    &lt;span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name"&gt;School(s):&lt;/span&gt; 
    &lt;span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value"&gt;Southwest&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at"&gt;
    &lt;span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name"&gt;Price Starting At:&lt;/span&gt;
    &lt;span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value"&gt;$100's&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="fp-floorplans"&gt;
  &lt;div id="fp-link"&gt;
    &lt;a href="#"&gt;Community 2&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location"&gt;
    &lt;span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name"&gt;Loation:&lt;/span&gt;
    &lt;span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value"&gt;East&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools"&gt;
    &lt;span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name"&gt;School(s):&lt;/span&gt;
    &lt;span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value"&gt;Southeast&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at"&gt;
    &lt;span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name"&gt;Price Starting At:&lt;/span&gt;
    &lt;span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value"&gt;$100's&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and I want to be able to sort by North, South, East, West for the 'wpcf-field-location-value' or just ascending for the 'wpcf-field-schools-value'.</p>

<p>I've tried implementing some suggestions that I've found but none have worked. (<a href="http://stackoverflow.com/questions/7831712/jquery-sort-divs-by-innerhtml-of-children">Jquery - sort DIV&#39;s by innerHTML of children</a> and <a href="http://stackoverflow.com/questions/8446615/sorting-divs-by-number-inside-div-tag-and-jquery">Sorting divs by number inside div tag and jQuery</a>)</p>
