JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
First popover button works ok.

<br>
    
<button id="firstPopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="some popover text.">
  Popover on bottom
</button>
    
<br>
Second popover button usses dynamic content and will not work correctly.
On reopening content will be duplicated.
<br>
    
<button id="secondPopover" type="button" class="btn btn-default">
  Popover on bottom
</button>

JavaScript

$('#firstPopover').popover();

$('#secondPopover').popover({
    html: true,
    placement: 'bottom',
    content: function (){
        // new element created dynamically
        // e.g. knockout model dynamically renered to some template
        return $('<div>').text('some popover text').get(0);
    }
})