only displaying "legend"

gistfile1.js

<script id="legend" type="text/x-template">
    <ul>
        <li class='panel-item legend-icon-my'>
            Add to my events</li>
        <li class='panel-item legend-icon-odds'>
            odds of winning</li>
        <li class='panel-item legend-flag-hot'>
            Hot</li>
        <li class='panel-item legend-flag-pick-staff'>
            Staff Pick</li>
    </ul>
</script> 





$('#legend').popover({
                offset: 10,
                trigger: 'click',
                animate: true,
                html: true,
                template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
                content: $('#legend').text()})

            .click(function(e) {
                        $(this).popover('show');
                });

<div class="indicator">
        <ul>
            <li>
                <a href="#" class="js-noop" id="legend" data-placement="top">
                    LEGEND
                </a>
            </li>
        </ul>
    </div>