[jQuery] Why is this example duplicating my content?

[jQuery] Why is this example duplicating my content?


Hello,
I made a recent post asking how to wrap a table around content. I have
a working example, however, if I have more than one member of the
'class' on the same page, jQuery is merging the content of the two in
the following fashion:
BEFORE:
<img class="wrap-table" src="test.jpg">
<img class="wrap-table" src="test2.jpg">
AFTER JQUERY FUNCTION:
<table>...<img class="wrap-table" src="test.jpg">.<img class="wrap-
table" src="test2.jpg">...</table>
<table>...<img class="wrap-table" src="test.jpg">.<img class="wrap-
table" src="test2.jpg">...</table>
You see how it looks like jQuery is finding all the matches, merging
them all, and then replacing them with the merged content.
Below is my function. It basically wraps a table around any element of
a particular class.
$(document).ready(function(){
    var photo = $('.photoframe');
    photo.before('<table><tr><td class="photoframe-tl"><div></div></
td><td class="photoframe-t"></td><td class="photoframe-tr"><div></
div></td></tr><tr><td class="photoframe-l"></td><td class="photoframe-
main photoframe-frame-content"></td><td class="photoframe-r"></td></
tr><tr><td class="photoframe-bl"><div></div></td><td class="photoframe-
b"></td><td class="photoframe-br"><div></div></td></tr></
table>').prev().find('td.photoframe-frame-content').append($
('.photoframe'));
});
Any help would be much appreciated!
Thanks!
Chris