jQuery append duplicates content

Question

I am new to jquery. I need help moving content. I am using the append method.

I want to be able to move each of the.links element into each .submitted element within the .node element. Right now append is adding all three .links to each .selected element. I have provided the code and a link to JSFiddle below.

Thanks for your help

Click here to view code in JSFiddle

jQuery

​$('.links').appendTo('.submitted');​​​​​​​​​​​​​​​​​

HTML

<div id="wrapper">
    <div class="node" class="clearfix">
        <h2>Node Title 1</h2>
        <div class="submitted">September 30</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 1 Link 1</a> | 
            <a href="#">Node 1 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 2</h2>
        <div class="submitted">September 29</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 2 Link 1</a> | 
            <a href="#">Node 2 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 3</h2>
        <div class="submitted">September 26</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 3 Link 1</a> | 
            <a href="#">Node 3 Link 2</a>
        </div>
    </div>
</div>​

CSS

#wrapper { width:600px; margin:0 auto; }
h2 { clear:both; }
.node { border-bottom:1px solid #CCCCCC; }
.submitted { float:left; width:200px; padding:10px; background-color:#CCCCCC; }
.content { float:left; width:360px; padding:10px; }

Answer 1

when you do this

$('.links').appendTo('.submitted')

you are selecting all elements with class .links and adding them to all elements with class .submitted

EDIT

now i understood what you want :)

this fixes it

$(".links").each(function(){
    $(this).appendTo( $(this).prevAll('.submitted') );
});

see it working here: http://jsfiddle.net/RASG/SGgM8/8/

Answer 2

Try the following.

$('.links').each(function() {
   var $this = $(this);
   $this.appendTo($this.siblings('.submitted'));
})

http://jsfiddle.net/PwJNe/

Note that your markup is invalid, change this:

<div class="node" class="clearfix">

to:

<div class="node clearfix">