toggle $(this)

toggle $(this)

Hello,

I have what I think is a basic question. I will have multiple li's of the same structure below on the same page. I click "more" and then the overlay appears. The only issue is that it appears for each instance. I understand why but I don't understand how to use the $(this) to isolate the interaction. Any help would be appreciated, thanks!

  1. <li class="marketingItem">
  2.       <div class="thumb">
  3.             <?=img(array('src'=>'images/marketing/gil.jpg','alt'=>'Book 1'))?>
  4.       <div>
  5.       <div class="overlay">
  6.              lorem ipsum overlaysum.
  7.       </div>
  8.       <div class="title">
  9.             This is the Title<br />
  10.             <a href="#" class="more">more</a>
  11.        </div>
  12. </li>

  14. <script type="text/javascript">
  15.       $(document).ready(function(){
  16.             $('.more').click(function(){
  17.                   $('.overlay').toggle('slow');
  18.             });
  19.       });
  20. </script>