title: Bootstrap Popover content not working
body: <p>I have a button which triggers a popover. It is generated by another script.</p>
  
  <pre><code>$('#appendTarget').append('&lt;div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;"&gt;' + item.name +
      '&lt;/div&gt;' +
      '&lt;div class="col-md-3"&gt;&lt;button class="btn" style="margin-bottom: 10px" onclick="showPopover(this)"&gt;&lt;b style="color: red"&gt;&lt;img src="Img/gear.png" style="width: 20px; height: 20px"&gt;&lt;/b&gt;&lt;/button&gt;');
  </code></pre>
  
  <p>This is my function for triggering:</p>
  
  <pre><code>function showPopover(element) {
      $(element).popover({
          html: true,
          content: function() {
              $('#popover-content').append('&lt;a href="#" class="btn btn-secondary"&gt;Edit&lt;/a&gt;'
                                          +'&lt;a href="#" class="btn btn-info"&gt;Activate&lt;/a&gt;'
                                          +'&lt;a href="#" class="btn btn-danger"&gt;Delete&lt;/a&gt;');
          }
      });
  }
  </code></pre>
  
  <p>And the <code>popover-content</code> is this:</p>
  
  <pre><code>&lt;ul id="popover-content" class="list-group" style="display: none"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But it is not working. However if I add this links directly into <code>&lt;ul&gt;</code> it works. But I want to add it dynamically so I can assign the id to each link (button).</p>
  
  <p>Anyone? Why append is not working in this case?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>@Arex had a good point that <code>display:none</code> state was not changing. I changed my function and it looks like this:</p>
  
  <pre><code>function showPopover(element) {
      $(element).popover({
          html: true,
          content: function() {
  
              var popover =  $('#popover-content');
  
              popover.show();
  
              popover = popover.append('&lt;a href="#" class="btn btn-secondary"&gt;Edit&lt;/a&gt;'
                                          +'&lt;a href="#" class="btn btn-info"&gt;Activate&lt;/a&gt;'
                                          +'&lt;a href="#" class="btn btn-danger"&gt;Delete&lt;/a&gt;');
              return popover;   
          }
      });
  }
  </code></pre>
  
  <p>And it works but very strange...</p>
  
  <p>When I click first time it looks like everything is fine:</p>
  
  <p><a href="https://i.stack.imgur.com/bkeyo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bkeyo.png" alt="State1"></a>
  After that when I try to close that popover, it extends (doubles) the content:</p>
  
  <p><a href="https://i.stack.imgur.com/Tnu2l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tnu2l.png" alt="state2"></a></p>
  
  <p>And finally when I try to open it again, it shows empty popover :/</p>
  
  <p><a href="https://i.stack.imgur.com/Vkyra.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vkyra.png" alt="State3"></a></p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I added <code>popover.empty()</code> and it works.. But when I open and close popover 2-3 times, it becomes empty. This starts to be annoying -.-</p>
  
  <p><a href="https://i.stack.imgur.com/lHUwN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lHUwN.png" alt="enter image description here"></a></p>