Find children then appendTo

Find children then appendTo

Hi, I'm having an issue with finding the first child of a container then removing it from that container, and appending it to a new container. I have 3 containers with 3 elements, but they all append to the first container. I'm not sure if it's because my entire structure is poorly created, or if I'm misusing ".children". But I was wondering if anyone could give me a hand understanding what I'm doing wrong. In the end each element should shift to the next container.

http://jsfiddle.net/mmbVr/

  1. $(document).ready(function() {
        $("#container2").click(function() {
            $("#container1").fadeOut(function() {
                    $(this).children().detach().appendTo($("#container2"));
                            }).fadeIn();
            $("#container2").fadeOut(function() {
                    $(this).children().detach().appendTo($("#container3"));
            }).fadeIn();
           
            $("#container3").fadeOut(function() {
                    $(this).children().detach().appendTo($("#container1"));
            }).fadeIn();
                   
           
        });
    });