Trying to combine two spans together with jQuery, need help looping/iterating
===

I think this is a pretty noob question, but I've thought about it for many many hours straight now, and I just can't figure it out.

I need to take this html code below and get the .project_name span & the .location span to merge into the same span.

    <ol id="projects" class="wide">
    <li class="dontsplit" id="1234">
        <a href="/projects/1234" class="thickbox dontsplit">
            <span class='project_name dontsplit'>First Project Name</span>
            <span class='location dontsplit'>Combined with First Location</span>
            <span class='extra-info-span1'></span>
        </a>
    </li>
    <li class="dontsplit" id="1233">
        <a href="/projects/1233" class="thickbox dontsplit">
            <span class='project_name dontsplit'>Second Project Name</span>
            <span class='location dontsplit'>Combined with Second Location</span>
            <span class='extra-info-span2'></span>
        </a>
    </li>
    <li class="dontsplit" id="1232">
        <a href="/projects/1232" class="thickbox dontsplit">
            <span class='project_name dontsplit'>Third Project Name</span>
            <span class='location dontsplit'>Combined with Third Location</span>
            <span class='extra-info-span3'></span>
        </a>
    </li>
    </ol>​

I have this jQuery code that will do it correctly for the first set of spans, but will continue to use the first span's contents to fill in the rest of them.

    var s1 = $('.project_name').html();
    $('.project_name').remove();
    $('.location').prepend(s1 + ' ');

I assume I need to use .each() or something similar, but I can't figure out the correct syntax to make it work. Here's [a jsFiddle](http://jsfiddle.net/Honsou/C3ehM/) with what I have so far.

Any ideas? It's probably pretty simple.