ブートストラップポップオーバー：2つの異なるリンク

Question

こんにちは（と申し訳ありません私の英語は、その権利はない場合）でオープン1つのポップオーバー、

私は同じポップオーバーを切り替えるしようとしているが、2つの異なるリンクを持ちますよ。例えば

：

第一リンク - ポップオーバーが

第二のリンク、それに接続されている - 第一リンク

にポップオーバーを開くことができ、私はそれを実行しようとしました：

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a> 

<div id="popover-content" class="hide"> 
    test 
</div> 

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">2nd link (open the popover on the first link)</a> 

しかし、それは動作しません、それはpopoverを複製します。

私Bootplyがあります：http://www.bootply.com/jAGRX9hm1a

は素晴らしいことだそれ

Answer 1

$(document).ready(function() 
 
{ 
 
    var t= $(".pop-contact").popover({ 
 
     html: true, 
 
     content: function() { 
 
      return $('#popover-content').html(); 
 
     } 
 
    }); 
 
    
 
    var shown=false; 
 
    
 
t.on('show.bs.popover', function() { 
 
    shown=true; 
 
}); 
 
    
 
    t.on('hide.bs.popover', function() { 
 
    shown=false; 
 
}); 
 
    
 
    
 
    $('.pop-contact2').click(function(e){ 
 
    e.preventDefault(); 
 
    if(shown) 
 
    t.popover('hide'); 
 
    else 
 
     t.popover('show');  
 
    }); 
 
    
 
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a> 
 

 
<div id="popover-content" class="hide"> 
 
    test 
 
</div> 
 

 

 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
<a class="pop-contact2" type="button" id="contact">2nd link</a> 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
<a class="pop-contact2" type="button" id="contact">3nd link</a>