Sort the divs by content
<p>I have a problem.</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-css lang-css prettyprint-override"><code>.titel
{
 display: inline-block;
 padding:5px 0 ;
}

#sort div div
{
 display: inline-block;
 padding:5px 0 ;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;div&gt;
   &lt;div class="titel achternaam" &gt;Achternaam&lt;/div&gt;
   &lt;div class="titel voornaam" &gt;Voornaam&lt;/div&gt;
   &lt;div class="titel kantoor" &gt;Kantoor&lt;/div&gt;  
  &lt;/div&gt;



  &lt;div class="spann"&gt;
   &lt;span class="ui-icon ui-icon-circle-triangle-n"&gt;&lt;/span&gt;
   &lt;span class="ui-icon ui-icon-circle-triangle-s"&gt;&lt;/span&gt;
   &lt;span class="ui-icon ui-icon-circle-triangle-n"&gt;&lt;/span&gt;
   &lt;span class="ui-icon ui-icon-circle-triangle-s"&gt;&lt;/span&gt;
   &lt;span class="ui-icon ui-icon-circle-triangle-n"&gt;&lt;/span&gt;
   &lt;span class="ui-icon ui-icon-circle-triangle-s"&gt;&lt;/span&gt;
  &lt;/div&gt;


  &lt;div id="sort"&gt;   
   &lt;div  class="someaspcode" onClick="someaspcodethatifyouclickitwilgotothepage"&gt;
          &lt;div class="achternaam"&gt;bill&lt;/div&gt;
          &lt;div class="voornaam"&gt;gates&lt;/div&gt;
          &lt;div class="kantoor"&gt;123&lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div  class="someaspcode" onClick="someaspcodethatifyouclickitwilgotothepage"&gt;
          &lt;div class="achternaam"&gt;jhonny&lt;/div&gt;
          &lt;div class="voornaam"&gt;depp&lt;/div&gt;
          &lt;div class="kantoor"&gt;43321&lt;/div&gt;
    &lt;/div&gt;
       
       </code></pre>
</div>
</div>
</p>

<p>The data from div with id sort comes from a database (thats the reason ,that I show it like this)</p>

<p>What I whant to do is :</p>

<p>If I click on the first icon it shows the list sorted by voornaam(asc)
If I click on the second icon it shows the list sorted by voornaam(desc)
If I click on the third icon it shows the list sorted by achternaam (asc)
and so further</p>

<p>I have tried everything that I found on stackoverflow and google but none of it worked.</p>

<p>Can someone give me a good piece of advice.</p>

<p>what i whant is something like this</p>

<p><a href="http://jsfiddle.net/7sgw21hn/1/" rel="nofollow noreferrer">http://jsfiddle.net/7sgw21hn/1/</a></p>

<p>but it must read the content </p>

<p>things i tried</p>

<p><a href="https://stackoverflow.com/questions/11433871/jquery-sorting-div-contents">jQuery - Sorting div contents</a></p>

<p><a href="https://www.sitepoint.com/community/t/sort-div-order-alphabetically-based-on-contents/39955/2" rel="nofollow noreferrer">https://www.sitepoint.com/community/t/sort-div-order-alphabetically-based-on-contents/39955/2</a></p>

<p>and many more (can't find it right now)</p>

<p>this is before i click</p>

<p><a href="https://i.stack.imgur.com/vjmtw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vjmtw.png" alt="enter image description here"></a></p>

<p>and this is after</p>

<p><a href="https://i.stack.imgur.com/i4jkz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i4jkz.png" alt="enter image description here"></a></p>

<p>can we do something about this </p>