Show one popover and hide other popovers

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


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


None of the answers I saw previously had dynamic popovers, so this is what I came up with. As some have pointed out, there are issues with popovers causing problems if they aren't removed from the DOM using .remove(). I forked an example from the bootstrap website and created this new fiddle. Dynamic popovers are added using the selector: '[rel=popover]' option. When a popover is about to be shown, I call destroy on all the other popovers, then remove the .popover content from the page.

$('body').popover({
                selector: '[rel=popover]',
                trigger: "click"
            }).on("show.bs.popover", function(e){
                // hide all other popovers
                $("[rel=popover]").not(e.target).popover("destroy");
                $(".popover").remove();                    
            });