Sorting Technique ascending and desending
<p>In the below html code I am having a name and age, on click of name and age the list items should get sorted from ascending to descending or descending to ascending.</p>

<p>This should be achieved without using any plugins
Please help me out how to achieve this. I am really very needful.</p>

<p></p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;

  &lt;style type="text/css"&gt;
  body{
    width:100%;
    margin:0px;padding:0px;
    font-size:14px;font-family:Arial;
  }
    #content{
        width:100%;
        border:1px solid red;
        height:auto;
    }
    #sorting_div{
        width:300px;
        border:1px solid black;
        height:30px;
    }
    #name{
        display:inline-block;
        width:200px;
    }
    #sorting_list{
        width:300px;
        border:1px solid green;
        height:100px;
    }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="content"&gt;
&lt;div id="sorting_div"&gt;
    &lt;span id="name"&gt;Name&lt;/span&gt;
    &lt;span id="Age"&gt;Age&lt;/span&gt;
&lt;/div&gt;
    &lt;div id="sorting_list"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;label&gt;Jenifer&lt;/label&gt; &lt;span&gt;24&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;label&gt;Kate&lt;/label&gt; &lt;span&gt;18&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;label&gt;David&lt;/label&gt; &lt;span&gt;25&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;label&gt;Mark&lt;/label&gt; &lt;span&gt;25&lt;/span&gt;&lt;/li&gt;

        &lt;/ul&gt;

    &lt;/div&gt;
&lt;/div&gt;




&lt;/body&gt;
&lt;/html&gt;
</code></pre>
