I have been looking for on this site and throughout google trying to sort this out with out any luck. Also I am new to jQuery so this may be elementary but here goes.... What I have is an unordered list with eight line elements, all links. When clicked each link should open a different article in a lightbox depending on which link has been clicked. The code I have written opens the article in the lightbox but will always open the first article of the first link to be clicked. Then if its closed and click a different link it opens the article for the first link. I am sure I need to use .index() to know what link has been clicked, but not sure how to go about it? Can anyone help me with this? Here is what part of my code looks like....

```
      <ul>
          <li><a href="#" id="a" class="links">Month One</a></li>
          <article>Here is a long article that opens in lightbox</article>

          <li><a href="#" id="b" class="links">Month Two</a></li>
          <article>Here is a long article that opens in lightbox</article>

    </ul>

    <script>
$('a').on('click', function (e) {
switch (e.target) {
    case "#a":
       $overlay.append($articelNameA);
      $articleNameA.show();
        break;
    case "#b":
     $overlay.append($articleNameB);
     $articleNameB.show();
        break;

}

```

});

```
//adds overlay to html body
$("body").append($overlay);

//capture click event on empty link
$("#a").click(function(event){
  event.preventDefault();
  var contentText = $('#aarticle').html();                   

  $articleNameA.html(contentText);   
  //opens the overlay on click
   $overlay.show();
});

$("#b").click(function(event){
  event.preventDefault();
  var contentText = $('#barticle').html();                   

  $articleNameB.html(contentText);   
  //opens the overlay on click
   $overlay.show(); 
   }); 

//Exit overlay on click
$overlay.click(function(){
  $overlay.hide();
});
});
    </script>

```

Hope that makes sense!