How does one sort html table and dynamically show clicked rows?
<p>When I first render my page, I have an html table like this:</p>

<pre><code>&lt;table&gt;
  &lt;tr style="display:none"&gt;
    &lt;td&gt;&lt;a href="#" data-val="1"&gt;SOME VALUE X&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;20000&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#" data-val="2"&gt;SOME VALUE Y&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;10000&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#" data-val="3"&gt;SOME VALUE Z&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;5000&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>I also have a form within the same page like this:</p>

<pre><code>&lt;form id="someform" action="/to/1&gt;              
        &lt;div id="main_content"&gt;             
                &lt;div id="name"&gt;
                    SOME VALUE X
                &lt;/div&gt;              
                &lt;div id="count"&gt;
                    20000
                &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
</code></pre>

<p>Notice the 1st row in the table is set to be hidden. That is because its values are shown in the form. That is my scenario, any time the user clicks on the link within the table  row, the form gets updated with the row's values and then the table row gets hidden. So after rendering, if the user clicks on the 2nd row 1)the form's values get updated 2)the row clicked on gets hidden 3) the row that used to correspond to the form's values prior to any clicking gets visible 3)table needs to be resorted in desc order on the visible rows.</p>

<p>To be more accurate and reiterate, each time the user clicks on any row, these are the steps that will need to happen:</p>

<ol>
<li>the row that corresponds to the current form values needs to now be visible</li>
<li>form's action to be "/to/[data-val]" of the clicked row</li>
<li>clicked row's 1st column value to be under div id="name"</li>
<li>clicked row's 2nd column value to be under div id="count"</li>
<li>hide the clicked row</li>
<li>sort the table in desc order based on 2nd column</li>
</ol>

<p>So in essence, I'm toggling. Either the row is visible or its values are shown within the form and then it's not visible.</p>

<p>How does one accomplish this in an elegant jQuery (latest version) way?</p>

<p>I hope this makes sense and looking forward to some answers.</p>
