I'm encountering an issue where I have two popovers, each containing HTML content.
Below is the code snippet:
<button class="count" data-toggle="popover">+click me</button>
<div class="popover_content_wrapper" style="display: none">
<p>Rahul</p>
</div>
<button class="count" data-toggle="popover">+click me</button>
<div class="popover_content_wrapper" style="display: none">
<p>Dravid</p>
</div>
In my JavaScript section:
$(function() {
$('[data-toggle="popover"]').popover({ html : true,
content: function() {
return $('.popover_content_wrapper').html();
}
})
})
When I click the first button, it works correctly and displays "Rahul" in the popover.
However, clicking the second button also shows "Rahul" instead of "Dravid". I need it to display "Dravid" when the second button is clicked.