I'm trying to create a feature that will display the popover with manual click event. My goal is to populate the popover and display newest data through ajax call after every click.

The problem I'm facing is described on the title.

For example:

1st click -> call once
2nd click -> call twice
3rd click -> call once
4th click -> call twice
... 

The code look like this:

$popoverButton.popover({
    container: 'body',
    template: `<div></div>`,
    title: 'title',
    content: function () {
        console.log('*');  // this called twice on every second click
        let id = $(this).attr('data-id');
        return initPopover(id);
    },
    html: true,
    trigger: 'manual',
});
function initPopover(id) {
    let $popover = $('<div class="popover-body"></div>');
    $popover.attr({'id': 'popover-body-' + id});
    let $spinner = $(`<div class="spinner"><span class="spinner-border"></span></div>`);
    $popover.append($spinner);
    let $sellers = $('<div class="sellers"></div>');
    $popover.append($sellers);
    return $popover;
}

To open the popover, I declared the click event with these functions:

$popoverButton.on('click', function () {
        closePopover();
        openPopover($(this));
});
closePopover() {
    $popoverButton.popover('hide');  
}
openPopover($targetButton) {
    // hide all opened popovers
    $('.popover').popover('hide');  
    $targetButton.popover('show');
    getSellersAndAppendData();
}

I'm not sure why this happened. Please help.