将元素从包含div移到另一个div

Im building a wordpress site which has a custom Tiny MCE style added to it, it gives the user a pre styles 'More' button containing an anchor, that goes at the bottom left of the post. The more button is formatted like this

<p><span class="moreButton"><a>Link here </a></span></p>.

My problem is styling the boxes to be dynamic in size, regardless of how much text is inside them and because the more button style is being inputted through a wordpress post, it is contained in a div that I cant seem to free it from.

All in all it looks like this:

<div class="newsBoxMore">
        <div class="newsBoxMainHolder">

        <div class="alumniHeading newsMainHeading">
        <h4>21 Years of NCCA Masters</h4>
        </div>

        <div class="alumniContent newsMainContent">
                    <p>As a reminder of where we started out this example from 1990 won a special award at the CG90 Festival.</p>
<p>Text in here.</p>
<p><span class="moreButton"><a title="Video" href="" target="_blank">View Here</a></span> </p>

        </div><!-- end newsMainContent -->

        <div class="newsDateHolder">
            <p>POSTED: 16.06.13</p>
        </div><!-- end newsDateHolder -->

        </div><!-- end newsBoxMainHolder -->

    </div><!-- end news Box More -->

What i am trying to do is move

<p><span class="moreButton"></span></p> 

out of the newsMainContent div and i want it to sit under it, just above the newsDateHolder div. I have tried using the following code :

$(".newsMainContent span").insertAfter($(".newsMainContent"));

The problem with this is that it duplicate the moreButton class with every anchor thats on the page. so i end up with a post that should have one moreButton but it now has 10 because the page is showing 10 posts.

Any help will be greatly appreciated!!

You need to give the element you want it to be after a unique ID, and use that instead of the class.