how to close one instance of a tooltip if I click another using jQuery

I am using the http://jqueryfordesigners.com/coda-popup-bubbles/

Due to my lack of js knowledge and some custom needs from the client I have one page with two targets that can each open a popup bubble. I also have multiple messages available to each bubble and they simply cycle through

 var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 0);

var messages_doll = ['<div id="doll_1">Our lawyers have adv开发者_开发知识库ised us not to make this video public. If you disagree please <a href="../lawyers.php">click here.</a></div>', '<div id="doll_2">Are you kidding? We\'re not THAT crazy!</div>', '<div id="doll_3">We shot this, but our Lawyers won\'t let us show it to you.</div>']; 


var messagecounter = 0;  
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).click(function () {
    $(".popup").html(messages_doll[messagecounter]).show();
        messagecounter++;
        if(messagecounter > 2){
            messagecounter=0;
        } 

This handles the messages for one of the targets and I duplicated the entire file, renamed it and the target divs so that it would work on another target on the same page. So I have this code duplicated in a new file with diff target divs.

The problem is that since I separated them when I click one, then another one from the other target it doesn't close the first.

Any idea how I can refactor this so that I still have multiple ordered messages but so that it closes one if I open another?

Something like if I click on the trigger for .bubbleInfo_nun it sets all popups from .bubbleInfo_doll to display:none

I know this description is poor...

The problem is that you are showing all the .popup classes every time

$(".popup").html(messages_doll[messagecounter]).show();

I don't know if .popup is a child of the .trigger but you'll need to turn off all the other .popups.

$('.popup').hide();
$(this).find('.popup').html(messages_doll[messagecounter]).show();