JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<ul id="project-list" class="nav nav-list">
    <li class='project-name'> <a>project name 1
         <button class="pop-function" rel="popover" ></button>
     </a>

    </li>
    <li class='project-name'> <a>project name 2
        <button class="pop-function" rel="popover" ></button>
     </a>

    </li>
</ul>
<div id="popover-content">
    <button class="pop-Add">Add</button>
</div>

CSS

li {
    display:inline-block;
    margin-left:10px;
}

JavaScript

var popOverSettings = {
    placement: 'bottom',
    container: 'body',
    html: true,
    //content:" <div style='color:red'>This is your div content</div>"
    content: function () {
        return $('#popover-content').html();
    }

}
$('ul').on('DOMNodeInserted', function () {
    $(event.target).find('button[rel=popover]').popover(popOverSettings);
});
$("button[rel=popover]").popover(popOverSettings);
$('.pop-Add').click(function () {
    $('ul').append("<li class='project-name'>     <a>project name 2        <button class='pop-function' rel='popover'></button>     </a>   </li>");
});