Display random number on Bootstrap popover

I have a bootstrap popover on a button that I would like to display a random number every time its clicked. However my current implementation only displays the first number generated and is not updated on subsequent clicks.

Here's my code.

  <button type="button" class="btn btn-primary rounded" data-bs-toggle="popover" id="d100">
    Popover Button
  </button>  

<script>
$(document).ready(function() {
  $('#d100').click(function() {
    var popoverContent = generalDice(1,100,0);

    // Show the popover
    $(this).popover({
      content: popoverContent,
      placement: 'top',
      trigger: 'manual'
    }).popover('show');


    // Remove the popover when clicking outside
    $(document).on('click', function(event) {
      if (!$(event.target).closest('#d100').length) {
        $('#d100').popover('hide').popover('destroy');
      }
    });

    // Prevent click event propagation to avoid immediate removal
    return false;
  });
});
</script>

Most Bootstrap components have events to leverage instead of writing all your own. (The click handlers already exist.) You could call your update function on the show event instead, and use the setContent method to update the value.

I haven't used jQuery with Bootstrap since v5 was released, so you'll have to do some translation if you prefer that. See youmightnotneedjquery.com for help transitioning away from that increasingly unnecessary dependency.

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

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

const popoverTriggerEl = document.querySelector('#d100');
let popoverVal = 0;

popover = new bootstrap.Popover(popoverTriggerEl, {
  content: popoverVal,
  placement: 'right'
});

popoverTriggerEl.addEventListener('show.bs.popover', () => {
  popoverVal = Math.random(); // replace with a call to your function

  popover.setContent({
    '.popover-body': popoverVal.toString()
  });
});

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<button type="button" class="btn btn-primary rounded m-5" data-bs-toggle="popover" id="d100">
  Popover Button
</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- end snippet -->