I'm using this function to create an transparent overlay of information over the current div for a web-based mobile app.

Background: using jQTouch, so I have separate divs, not individual pages loading new.

$(document).ready(function() { 
    $('.infoBtn').click(function() {
        $('#overlay').toggleFade(400);
        return false;    
     });
 });

Understanding that JS will run sequentially when i click the button on the first div the function works fine. When I go to the next div if I click the same button nothing "happens" when this div is displayed, but if i go back to the first div it has actually triggered it on this page.

So I logically duplicated the function and changed the CSS selector names and it works for both.

But do I have to do this for each use? Is there a way to use the same selectors, but load the different content in each variation?