title: How to get multiple popovers on one twitter-bootstrap html page to work
body: <p>I getting an HTML page going with twitter-bootstrap. I've been able to get the tooltips and popovers working and have been able to add some custom CSS styles to the popovers.</p>
  
  <p>Now I am trying to add 3 buttons to the page that trigger 3 popovers on click.</p>
  
  <p>I've added this code to each of the 3 buttons:</p>
  
  <pre><code>&lt;a class="btn btn-default" href="#" role="button" id="st-popover" data-toggle="popover" rel="popover" title="&lt;strong&gt;Ideal for:&lt;/strong&gt; Clients who no longer need an equity line of credit and are in a financial position to begin repaying their balance with the new monthly payments.&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;What:&lt;/strong&gt; Begin to pay off the balance of your existing equity line of credit when the draw period ends.&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;Get started:&lt;/strong&gt; Continue to make regular payments under the repayment period terms of your existing home equity line of credit; no further action is required." data-placement='bottom' data-html='true'&gt;Learn More&lt;/a&gt;
  </code></pre>
  
  <p>But the problem seems to be that only the first button popover in the DOM triggers on click. The other two just sit there doing nothing.</p>
  
  <p>This is my scripts at the bottom:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="dist/js/tooltip.js"&gt;&lt;/script&gt;
  &lt;script src="dist/js/popover.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function(){
          $('#st-popover').popover();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help getting the 3 to work on one page or any resources to look at would be appreciated, thanks.</p>