Reopen popovers in Bootstrap 3.3.6

So I have problems with popovers on my site.

When I click on any icon to show popover and then try to close that popover by clicking anywhere on screen, it works normally, but after that I need to click this icon twice instead of once to reopen popover. Problem do not appear when I close popover by clicking on the parent-icon.

Visualisation

I'm using this JS code to hide any popover while clicking outside:

Javascript

$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Here's example code of my icon:

HTML

<div class="col-xs-4 text-center">
    <img alt="CarIcon" src="imagesCarIcon.png" class="img-responsive center-image-responsive" data-toggle="popover" data-placement="top" title="Car configuration" data-content="And here's some amazing content. It's very engaging. Right?" />
 </div>   

I'd be grateful for any answers.