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();
    }

}

$("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>");
});

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

// create an observer instance
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        $(mutation.addedNodes).find('button[rel=popover]').popover(popOverSettings);
    });
});

// configuration of the observer:
var config = {
    attributes: true, 
    childList: true, 
    characterData: true
};

// pass in the target node, as well as the observer options
observer.observe($('ul')[0], config);