I've built a simple dropdown menu to replace some html select menus like so:

```
$('html, .currentPage').click(function() { 
    $('.currentMenu').slideUp('fast'); 
});

$('.currentPage').click(function(e){        
    if(!$(this).next().is(":visible")) { 
        $(this).next().stop().slideDown('fast'); 
    }
    e.stopPropagation(); 
});

$(".currentMenu li").click(function(e){
  e.preventDefault();
  $(".currentPage").html($(this).text());
});

```

However, if I were to have more than one menu, the final part:

```
$(".currentMenu li").click(function(e){
  e.preventDefault();
  $(".currentPage").html($(this).text());
});

```

will occur on both menus. How can I target the ".currentPage" class for that specific menu only?

HTML:

```
                        <div class="menuWrap font">
                            <div class="currentPage">Trebuchet MS</div>
                            <div class="currentMenu">
                              <ul>
                                <li>Arial</li>
                                <li>Helvetica</li>
                                <li>Droid Sans</li>
                                <li>Trebuchet MS</li>
                                <li>Georgia</li>
                                <li>Droid Serif</li>
                              </ul>
                            </div>
                        </div>

                        <div class="menuWrap fontSize">
                            <div class="currentPage">12pt</div>
                            <div class="currentMenu">
                              <ul>
                                <li>9pt</li>
                                <li>10pt</li>
                                <li>11pt</li>
                                <li>12pt</li>
                                <li>13pt</li>
                              </ul>
                            </div>
                        </div>  

```