How to run simultaneous live search filters in jQuery?
<p>I have several blocks of HTML like the one below named <strong>recordContainer</strong> within the <strong>records</strong>  <code>&lt;div&gt;</code>, generated dynamically. To refer to the whole block when querying it I'm using:</p>

<p><code>$(".records div.recordContainer").each(function(){</code></p>

<pre><code>  &lt;div id="records"&gt;
        &lt;div class="recordContainer" id="article0"&gt;
             &lt;div class="lineDivide"&gt;&lt;/div&gt;
             &lt;span class="listLeadAuthor"&gt; Brian May&lt;/span&gt;

  &lt;br /&gt; 
             &lt;span class="listSubject"&gt;Cheese&lt;/span&gt;
            &lt;br /&gt;
             &lt;span class="listDate"&gt;2008&lt;/span&gt;
       &lt;/div&gt; 
&lt;/div&gt;
</code></pre>

<p><strong>I'd like to refer to the individual span elements only</strong> as I have three different search boxes. </p>

<p>Here's a JSFiddle of what I'm trying to accomplish. When I enter an author name in the recordContainer, I want to hide the whole other recordContainer that doesn't match, not just the author name. I want to be able only search the visible elements, rather than starting fresh on each search.</p>

<p><a href="http://jsfiddle.net/Zv5rY/2/" rel="nofollow">JSFiddle Here</a></p>
