How do I get hidden HTML to appear only in my popover on click, not elsewhere on the page?

Question

I know this may be a weird request, but I am using a popover and I have some HTML in that popover.

However, when my link is clicked it shows both the HTML at the bottom of the page and the HTML in the popover. I just want it to show the HTML in the popover only.

This is my HTML:

<small class="download-notice">Note: This is not a Physical DVD. Downloading &amp; Streaming Only.<br />
    <a href="#" id="masterclass-popover" data-toggle="popover">Click here for Details about The Masterclass.</a>
</small>


<div id="masterclass-popover-head" class="hidden">Masterclass Contents</div>
<div id="masterclass-popover-content" class="hidden">
    Test Content!
        <ul>Test
            <li>iTem 1</li>
            <li>iTem 2</li>         
        </ul>
</div>

This is my JS:

   $(document).ready(function(){
    $("#masterclass-popover").popover({
    html : true,
        placement: 'bottom',
    title: function() {
      return $("#masterclass-popover-head").clone();
    },
    content: function() {
      return $("#masterclass-popover-content").clone();
    }
    });

    $("small.download-notice a").click(function(e) {
    e.preventDefault();    
    });

  $("#masterclass-popover").click(function() {
    $("div#masterclass-popover-head").toggleClass("hidden");
    $("div#masterclass-popover-content").toggleClass("hidden");
  });
});

Edit 1

If you wanted to refactor my JS, you would get an extra +1 for that - because I know it is likely quite inefficiently written.

Edit 2

I had included the wrong link to a live version. Here is the updated one: http://jsfiddle.net/VB32W/1/

Answer 1

$(document).ready(function(){
    $("#masterclass-popover").popover({
        html : true,
        placement: 'bottom',
        title: $("#masterclass-popover-head").text(),
        content: $("#masterclass-popover-content").html(),
    });
});

jsfiddle