title: Bootstrap popover change html content
body: <p>I need to change the popover content inside the bootstrap popover frequently. To make that i created the popover with the content, for the next time i destroyed the popover and created again. But its not working as expected. The issue is its only working on even times, ie. for the 1st time it works for second its not working for third its working and so on.</p>
  
  <p>I have created my scenario as</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="today_not_to_doctr"&gt;
    note
  &lt;/div&gt;
  &lt;button id="test"&gt;
    haii
  &lt;/button&gt;
  </code></pre>
  
  <p>Javascript </p>
  
  <pre><code>var i = 0;
  var content = "&lt;div&gt;haiii&lt;/div&gt;" + i;
  
  $('#today_not_to_doctr').popover({
    title: "&lt;h5&gt;Note to Doctor&lt;/h5&gt;",
    content: content,
    html: true,
    placement: "bottom",
    viewport: {
      selector: 'body',
      padding: 20
    }
  });
  
  $('#test').on('click', function() {
    i++;
    content = "&lt;div&gt;haiii&lt;/div&gt;" + i;
    $('#today_not_to_doctr').popover('destroy');
    $('#today_not_to_doctr').popover({
      title: "&lt;h5&gt;Note to Doctor&lt;/h5&gt;",
      content: content,
      html: true,
      placement: "bottom",
      viewport: {
        selector: 'body',
        padding: 20
      }
    });
  });
  </code></pre>
  
  <p>I have replicated the issue in the fiddle 
  <a href="https://jsfiddle.net/sulusfiddle/b8omeph2/" rel="nofollow noreferrer">https://jsfiddle.net/sulusfiddle/b8omeph2/</a></p>