appendTo with ordering, perhaps appendTo is not the right thing to use?

I want to have 3 checkboxes, lets call them checkbox1, checkbox2, and checkbox3.

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1开发者_StackOverflow" />checkbox3</div>
</div>
<div id="endingpoint"></div>
</form>

I set them up so that when a checkbox is checked, it uses appendTo to relocate them from "starting point" to "ending point". It is working fine. Problem is, I want them to stay in chronological order (the order they started in).

SO...if I checked "checkbox3" and then "checkbox1", I want the result to be this:

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
</div>
</form>

BUT...with the way appendTo works, I get this (note that "checkbox3" is above "checkbox1")

<form id="test">
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div>
</div>
<div id="endingpoint">
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div>
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div>
</div>
</form>

How can I keep them in chronological order, specifically the order that they started in. Perhaps appendTo isn't the solution?

ADDED IN RESPONSE TO COMMENT:

<script type="text/javascript">
$(function(){
$('#test input').attr('checked', false);
$('#test input').click(function(){
    if (this.checked) {
        $(this).closest('div').hide().appendTo("#endingpoint").fadeIn(1000)
    }
    else {
        $(this).closest('div').hide().appendTo("#startingpoint").fadeIn(1000)
    }
});
});
</script>

I would go with the simpler solution of having placeholders, but if you really want an algorithm for unlimited boxes, you can do this http://jsfiddle.net/rkw79/zCVGZ/:

Tag all the divs with an attribute:

$('#startingpoint div.clickdiv').each(function(i,o) {
    $(o).attr('order', i);
});

Insert in the end point based on their 'order' attr:

$('#startingpoint').delegate('div.clickdiv', 'click', function() {
    var clickeddiv = $(this).detach();
    if (clickeddiv.attr('order') == 0) {
        $('#endingpoint').prepend(clickeddiv);
    } else {
        var inserted = false;
        $('#endingpoint div.clickdiv').each(function(i,o) {
            if (clickeddiv.attr('order') < $(o).attr('order')) {
                $(o).before(clickeddiv);
                inserted = true;
                return false;
            }
        });
        if (!inserted) {
            $('#endingpoint').append(clickeddiv);
        }
    }
});

A simple solution would be to have three empty divs as children of endpoint, use IDs or another attribute to identify them. When a checkbox is selected, the html of the corresponding div in endpoint is set to the checkbox html.

Update (Response to comment):

You can setup your code so that it is irrelevant how many checkboxes there are. You can get the index of an object by setting an attribute 'order' for example then call this.attr('order') to get the order value and append to $('#clickDiv' + order). You can also use the ID attribute and simple string manipulation to the same effect.

I guess you append to the "test" div. this behavior is then logical. the last appended is at the bottom.

try:

$('input').click(function () {
  $(this).insertAfter('#endingpoint');
);

edit: well, you added your script, i guess now you know what to do. use "insertAfter" instead of "appendTo"