How to apply table header sorting to divs by an individual list element?
<p>I'm creating a series of <code>&lt;div&gt;</code>s dynamically from an external query. Using Javascript a <code>&lt;div&gt;</code> is created and populated with separate list elements. The structure is something like:</p>

<pre><code>&lt;div class="container" id="1"&gt;
    &lt;li class="date"&gt; &lt;/li&gt;
    &lt;li class="name"&gt; &lt;/li&gt;
&lt;div&gt;
</code></pre>

<p>The search boxes run a jQuery livefilter on keyUp that hides <code>&lt;div&gt;</code>s that dont match the search.</p>

<p>I then want to be able to sort the visible divs by clicking on table headers that address individual <code>&lt;li&gt;</code> elements in the <code>&lt;div&gt;</code> (date, name, etc). I've tried using tablesorter and putting each <code>&lt;li&gt;</code> in a <code>&lt;td&gt;</code> but the table head ends up below the body and does not function.</p>

<p><strong>How can I apply sorting only to the currently visible list element but sort the entire div?</strong></p>

<p><img src="http://i.stack.imgur.com/Eszyf.jpg" alt="Diagram of table"></p>

<p><a href="http://jsfiddle.net/F4BPG/" rel="nofollow">JSFiddle of live filter with non operational header.</a></p>
