JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<input type="text" id="cboStores" placeholder="Select Store" value="My Foot" style="width:150px;height:30px;" />

CSS

.cont-popup-cbo-menu .popover-content {
    padding-left: 0;
    padding-right: 0;
}

ul.popup-cbo-menu {
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #fbfbfb;
    min-width: 180px;
}

    ul.popup-cbo-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        ul.popup-cbo-menu li:hover {
            background-color: #f2f2f2;
            color: blue;
        }

        ul.popup-cbo-menu li a {
            background: none;
            color: #363636;
            text-decoration: none;
            margin: 0;
            padding: 5px 10px 5px 10px;
            -o-text-overflow: ellipsis; /* Opera */
            text-overflow: ellipsis; /* IE, Safari (WebKit) */
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            display: block;
        }

        ul.popup-cbo-menu li.selected a {
            color: #363636;
            background-color: #f2f2f2;
            font-weight: bold;
        }

        ul.popup-cbo-menu li a:hover {
            color: blue;
            text-decoration: none;
        }

        ul.popup-cbo-menu li span {
            background-color: #f2f2f2;
            color: #363636;
            text-decoration: none;
            font-weight: bold;
            margin: 0;
            padding: 5px 10px 5px 10px;
            -o-text-overflow: ellipsis; /* Opera */
            text-overflow: ellipsis; /* IE, Safari (WebKit) */
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            display: block;
        }

JavaScript

setStore = function ($s, id, name) {
    //alert("length: " + $s.parents('ul.popup-cbo-menu').find('li.selected').length);
    $s.parents('ul.popup-cbo-menu').find('li.selected').removeClass('selected');
    //alert("length: " + $s.parents('ul.popup-cbo-menu').find('li.selected').length);
    
    //$s.parent('li').addClass('selected');
    $('#cboStores').val(name);
}

$(document).ready(function () {
    $("#cboStores").popover({
        viewport: 'body',
        trigger: 'click',
        placement: 'bottom',
        html: true,
        content: '<ul class="popup-cbo-menu">' +
                 '   <li><a href="#" onclick="setStore($(this), -1, \'All Stores\')">All Stores</a></li>' + 
                 '   <li class="selected"><a href="#" onclick="setStore($(this), 1, \'My Foot\')">My Foot</a></li>' +
                 '   <li><a href="#" onclick="setStore($(this), 2, \'My Foot 1\')">My Foot 1</a></li>' +
                 '</ul>',
        template: '<div class="popover cont-popup-cbo-menu" role="tooltip">' +
                  '   <div class="arrow"></div><h3 class="popover-title"></h3>' +
                  '   <div class="popover-content"></div>' +
                  '</div>'
    }).blur(function () {
        $(this).popover('hide');
    });
});