sorting elements using jquery
<p>I have a div, <code>#containerDiv</code>, which contains elements related to users like first name, last name etc. in separate divs. I need to sort the contents of the container <code>div</code> based on the last name, first name etc. values.</p>

<p>On searching google the examples I got all are appending the sorted results and not changing the entire HTML being displayed. They are also not sorting by specific fields (first name, last name).</p>

<p>So please help me in sorting the entire content of <code>#containerDiv</code> based on specific fields and also displaying it.</p>

<p>The Page looks Like something as mentioned Below:</p>

<pre><code>&lt;div id="containerDiv"&gt;
    &lt;div id="lName_1"&gt;dsaf&lt;/div&gt;&lt;div id="fName_1"&gt;grad&lt;/div&gt;
    &lt;div id="lName_2"&gt;sdaf&lt;/div&gt;&lt;div id="fName_2"&gt;radg&lt;/div&gt;
    &lt;div id="lName_3"&gt;asdf&lt;/div&gt;&lt;div id="fName_3"&gt;drag&lt;/div&gt;
    &lt;div id="lName_4"&gt;fasd&lt;/div&gt;&lt;div id="fName_4"&gt;gard&lt;/div&gt;
    &lt;div id="lName_5"&gt;dasf&lt;/div&gt;&lt;div id="fName_5"&gt;grda&lt;/div&gt;
    &lt;div id="lName_6"&gt;asfd&lt;/div&gt;&lt;div id="fName_6"&gt;drga&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>On getting sorted by last name div values, the resulted structure of the container div should look like:</p>

<pre><code>&lt;div id="containerDiv"&gt;
    &lt;div id="lName_3"&gt;asdf&lt;/div&gt;&lt;div id="fName_3"&gt;drag&lt;/div&gt;
    &lt;div id="lName_6"&gt;asfd&lt;/div&gt;&lt;div id="fName_6"&gt;drga&lt;/div&gt;
    &lt;div id="lName_5"&gt;dasf&lt;/div&gt;&lt;div id="fName_5"&gt;grda&lt;/div&gt;
    &lt;div id="lName_1"&gt;dsaf&lt;/div&gt;&lt;div id="fName_1"&gt;grad&lt;/div&gt;
    &lt;div id="lName_4"&gt;fasd&lt;/div&gt;&lt;div id="fName_4"&gt;gard&lt;/div&gt;
    &lt;div id="lName_2"&gt;sdaf&lt;/div&gt;&lt;div id="fName_2"&gt;radg&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Now I think you all can help me in a better way.</p>
