<button class="btn btn-primary" id='add-popover'>

  dynamic popover

</button>

​

<div id="wrapper">

</div>

​

const addPopoverBtn = document.querySelector('#add-popover');

const wrapper = document.querySelector('#wrapper');

const template = `<button

    type="button"

    class="btn btn-lg btn-danger"

    data-mdb-ripple-init

    data-mdb-popover-init

    title="Popover title"

    data-mdb-content="And here's some amazing content. It's very engaging. Right?"

    id="dynamic-popover"

  >

    Click to toggle popover

  </button>`

​

addPopoverBtn.addEventListener('click', ()=>{

  new mdb.Popover('body', {selector: '#dynamic-popover'})

  wrapper.insertAdjacentHTML("beforeend", template);

})