title: How to use the index of one <li> in identifying a corresponding <li>
body: <p>Been working on this problem and I am frustrated with not having a solid comprehension on how to create a pointer and instantiation of a pointer via jQuery.</p>
  
  <p>I have two lists:</p>
  
  <pre><code>&lt;div class="listSet"&gt;
      &lt;ul id="list1"&gt;
          &lt;li&gt;One bug &lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;Two bug &lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;Three bug &lt;a href="#"&gt;X&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div class="listSet"&gt;  
      &lt;ul id="list2"&gt;
          &lt;li&gt;&lt;img src="bug1.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="bug2.jpg"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="bug3.jpg"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using the capture of the click on the first list to give me the index of that unordered list:</p>
  
  <pre><code>var theBox = $(this).parents('li');
  theBoxInd = $('#list ul li').index(theBox);
  </code></pre>
  
  <p>How do I get a handle on the corresponding LI in the second list?  I wanted to remove them from the screen, but can not seem to replicate the idea of having the index of the second list to be able to <code>.remove()</code> the two LIs.</p>
  
  <p>Any help is appreciated.</p>