Multiple bootstrap popovers on page but only the first one that's clicked works as desired-Twitter bootstrap

I have multiple popovers which are placed in different cells of a jquery datatable.

//popover needs to be triggered onclick on this i element
<i tabIndex ="0" class="fa fa-info-circle popoverIcon" aria-hidden="true" data-placement="bottom" data-toggle="popover" ></i>
//this is hidden by css
<div class="popover-content hidden"><div>Popover text</div></div>

Popover initialization:

$('#MyDataTable').on('mouseenter', '.popoverIcon', function (event) {
  $(this).popover({
    html: true,
    content: function () {
            return $(this).next().html();
        },
    title: "Comment",
    trigger: "manual"
    });
});

I want the popover to have all trigger: "click" functionality, but be dismissable by clicking OUTSIDE the popover element area (popover area = the popover box itself or the mentioned i element). I have applied a solution I found here How to dismiss a Twitter Bootstrap popover by clicking outside?

It looks like that. The function to SHOW popover:

$('#MyDataTable').on('click', '.popoverIcon', function (event) {
    //if popover closed - open it
    if (!popoverOpen) {
        $(this).popover('toggle');
        popoverOpen = true;
    }
});

The function to HIDE popover:

 $(document).on('click', function (e) {
  if (popoverOpen && !mouseOnPopoverArea) {
        $('[data-toggle="popover"]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
        popoverOpen = false;
    }
});

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?