using jquery on two separate sections of data
<p>I have a page which generates two lists out of SQL.  I'll use example information and setup:</p>

<p>The first list is all records from Memphis, so it pulls Name, Cartype, Year, and Color.</p>

<p>Jeremy, Saturn, 2001, Black<br>
Sue, Buick, 1996, Green<br>
John, Dodge, 2006, Red</p>

<p>The second list is all records not from Memphis.  Again with the same fields.</p>

<p>Bobby, Mercury, 1999, Blue<br>
Mike, Mustang, 1974, White<br>
Robby, Prius, 2009, Silver</p>

<p>I want to let a user match one set from each separate list.  For example, I want to click on Sue (in the first list), and Bobby (in the second list).  For each of those clicks, I want it to hide the rest of /that/ list, and to capture an identifier value.</p>

<p>So if you clicked on Sue, the other rows in that list would vanish, and jquery would capture a value for Sue.</p>

<p>code:</p>

<pre><code>&lt;li class2=\"$IDnumber\" class=\"items\"&gt;$name, $type, $year, $color&lt;/li&gt;&lt;/br&gt;

$('li').click(function() {
           $(this).siblings(".items").hide(); 

           var charID = $(this).attr('class2');
            alert(page);

        });
</code></pre>

<p>The above code works -  sortof.  It hides the corresponding items in the list with class of "item", and it captures my IDnumber value.  But I cannot figure out how to do the same (but separate) with the second list.  What's the trick here?</p>
