title: Multiple bootstrap popovers on page but only the first one that's clicked works as desired
body: <p>I have multiple popovers which are placed in different cells of a jquery datatable. </p>
  
  <pre><code>//popover needs to be triggered onclick on this i element
  &lt;i tabIndex ="0" class="fa fa-info-circle popoverIcon" aria-hidden="true" data-placement="bottom" data-toggle="popover" &gt;&lt;/i&gt;
  //this is hidden by css
  &lt;div class="popover-content hidden"&gt;&lt;div&gt;Popover text&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Popover initialization:</p>
  
  <pre><code>$('#MyDataTable').on('mouseenter', '.popoverIcon', function (event) {
    $(this).popover({
      html: true,
      content: function () {
              return $(this).next().html();
          },
      title: "Comment",
      trigger: "manual"
      });
  });
  </code></pre>
  
  <p>I want the popover to have all <code>trigger: "click"</code> functionality, but be dismissable by clicking OUTSIDE the popover element area (popover area = the popover box itself or the mentioned <code>i</code> element). I have applied a solution I found here <a href="https://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside?page=2&amp;tab=votes#tab-top">How to dismiss a Twitter Bootstrap popover by clicking outside? 
  </a> </p>
  
  <p>It looks like that. The function to SHOW popover:</p>
  
  <pre><code>$('#MyDataTable').on('click', '.popoverIcon', function (event) {
      //if popover closed - open it
      if (!popoverOpen) {
          $(this).popover('toggle');
          popoverOpen = true;
      }
  });
  </code></pre>
  
  <p>The function to HIDE popover:</p>
  
  <pre><code> $(document).on('click', function (e) {
    if (popoverOpen &amp;&amp; !mouseOnPopoverArea) {
          $('[data-toggle="popover"]').each(function () {
              if (!$(this).is(e.target) &amp;&amp; $(this).has(e.target).length === 0 &amp;&amp; $('.popover').has(e.target).length === 0) {
                  $(this).popover('hide');
              }
          });
          popoverOpen = false;
      }
  });
  </code></pre>
  
  <p>The strange thing is, it works perfectly, but ONLY with the very first popover I open. When I try to open the second, third, fourth (...) one, nothing is happenning. When I go back to the first one I clicked, it works again. What could be the matter? </p>