JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<table id="tbl">
<tbody>
<tr>
<td>
<a class="has-popover" href="#">TESTING POPOVER</a>
<div class="popover_content_wrapper" style="display: none"> <ul>
<li>001 - 75000 - 08/10/2015</li></ul>
002 - 25000 - 16/11/2015
003 - 25000 - 30/11/2015
004 - 7500 - 18/02/2016
005 - 10000 - 09/05/2016
006 - 10000 - 03/06/2016
007 - 10000 - 22/06/2016
008 - 15000 - 15/09/2016
009 - 20000 - 28/11/2016
010 - 10000 - 21/12/2016
011 - 15000 - 20/01/2017
012 - 15000 - 01/02/2017
013 - 20000 - 01/03/2017
014 - 25000 -
015 - 25000 -
016 - 30000 - </div>
</td>
</tr>
<tr>
<td>
<a class="has-popover" href="#">TESTING POPOVER</a>
<div class="popover_content_wrapper" style="display: none">This is your div content (NUMBER 2)</div>
</td>
</tr>
</tbody>
</table>
<div class="popover_content_wrapper" style="display: none">This is your div content</div>
<button id='addRow'>Add Row</button>
CSS
tr {
border: 1px solid black;
}
JavaScript
$('body').popover({
html: true,
content: function () {
return $(this).next().text();
},
selector: '.has-popover'
});
$('#addRow').click(function () {
$('#tbl tr:last').after('<tr><td><a class="has-popover" href="#">TESTING POPOVER</a></td</tr>' +
'<div class="popover_content_wrapper" style="display: none">This is your div content (NEW TO THE DOM)</div>');
});