[jQuery] involuntary closing of tags

[Carl-Erik]

Hi, I'm new to jQuery, so forgive my ignorance if I've missed
something trivial...

I'm trying to move text enclosed in <div class="footnotes"> to the
bottom of the page, and insert a link to the footnote in the location
it was originally in. However, when the div is moved, the <p>-tag it
was in gets closed, and any remaining text that was in the <p> is left
outside. The link I insert is also outside the <p>. How can I avoid
this?

Here's my code:

<script type="text/javascript">
$(document).ready(function() {

        //put all footnotes into a variable
        var fotNoter = $(".footnote").clone();

        //replace each footnote with a link to the footnote at the bottom of
the page
        $(".footnote").each(function(i) {
        $(this).replaceWith("[" + "<a href='#" + i + "'>" + (i+1) + "</a>" +
"]" );
        });

        //the div with id="footnotes" already exists at the bottom of the
page, insert footnotes into div
        $(fotNoter).appendTo("div#footnotes")

        //print a number in front of each footnote and assign anchor id
        $(fotNoter).each(function(j) {
          $(this).prepend(j+1 + ") ");
          $(this).prepend("<div id='" + j + "'>");
          $(this).append("</div>");
        });
});
</script>

Instead of using replaceWith I also tried

$(this).html("[" + "<a href='#" + i + "'>" + (i+1) + "</a>" + "]" );

and

$(this).before("[" + "<a href='#" + i + "'>" + (i+1) + "</a>" +
"]").remove();

but to no avail...

Any help would be appreciated.

- Carl-Erik