Bootstrap 5 - dynamic popover not opening once hidden

I'm trying to open a popover based on the custom selector attribute dynamically using click as trigger using the below code.

var popoverTriggerEl = $('body');
_popover = new bootstrap.Popover(popoverTriggerEl, {
  container: 'body',
  html: true,
  placement: "bottom",
  trigger: 'click',
  selector: '[people-card="click-action"]',
  customClass: 'dpn-peoplecard',
  content: function(event) {
    return 'test';
  }
});  

But when I try to close the opened popover on document click using below code, the popovers are getting completely hidden and not opening on next click.

$(document).click(function(e) {
  if ($(e.target).parent().find('[people-card="click-action"]').length > 0) {
    $('[people-card="click-action"]').popover('hide');
  }
});  

I have prepared a JsFiddle based on my requirement where there are two buttons with the same selector. If we try to open popover by clicking on any button for the first time, the popover is getting opened. But once the document click happens and popover is hidden, we are not able to open any popovers from other selector button clicks.

Note: I'm displaying some html content which has some click events in the bootstrap popover content.

JsFiddle Here

Please guide me on the mistake I'm doing here

You should use the focus event instead of the click event (doc example) :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

<!-- language: lang-html -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button tabindex="0" type="button" id="button1" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Dismissible popover" data-bs-placement="bottom">Show Popover</button>

<button tabindex="0" type="button" id="button2" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Dismissible popover" data-bs-placement="bottom">Show Popover</button>

<!-- end snippet -->