如何确保每次只激活一个弹出窗口

Question

我有以下代码，显示了我页面的每个元素的ajax内容。

function details_in_popup(link, div_id){
    $.ajax({
        url: link,
        success: function(response){
        $('#'+div_id).empty().html(response);
        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

$(function () {
    $('[data-toggle="popover"]').popover({
        "html": true,
        "title": '<span class="text-info"><strong>Quick View</strong></span>' +
                '<button type="button" id="close" class="close" >&times;</button>',
        "content": function () {
            var div_id = $(this).data('id');
            return details_in_popup($(this).data('url'), div_id);
        }
    }).on('shown.bs.popover', function (e) {
        var popover = jQuery(this);
        $('body').on('click', '.close', function (e) {
            //popover.popover('hide');
            $(".popover").remove();
            $(this).data('id').remove();
        });
    });
});

在html中我有：

<button data-url="<%= my_url %>" href="#" type="button" class="" data-container="body"  data-toggle="popover" data-id="<%= product.slug %>"  style="">Popover</button>

此代码可以解决问题，并在第一次打开弹出框的意义上显示具有正确内容的弹出窗口。我有正常的行为

但是从第二次开始，我有2个弹出窗口，一个在另一个上面，一个有加载消息，另一个有内容。加载弹出窗口的按钮也可以关闭两个弹出窗口。

第一次弹出：

第二次弹出：

你有什么想法我怎么能骑第二个加载弹出窗口并将关闭按钮绑定到有内容的弹出窗口？

非常感谢，我希望我的解释清楚