twitter bootstrap - Show one popover and hide other popovers

Question

i have several buttons and i need a popover for each.
i want it like this:
when my user click on one of them, i want others to be hidden. so only one popover is shown
check and help me correcting this example plz:

var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'

$('.btn').popover({
    html: true,
    content:mycontent,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

$('html').click(function(e) {
     $('.btn').popover('hide');
});

my html:

<ul>
    <li>
        <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
    </li>
    <li>
       <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a> 
    </li>
</ul>

jsfiddle example

adding something like the code bellow solved my problem somehow:

$('.btn').click(function(e) {
     $('.btn').popover('hide');
});

but by clicking twice on each button it goes wrong

Answer 1

somehow i created one example for my need. i used this code:

$('.btn').popover();

$('.btn').on('click', function (e) {
    $('.btn').not(this).popover('hide');
});

check the demo here

and corrected the previous demo i hope it will help someone else