Jquery如何实现div的移动？

今天做了一个在线取题的小程序，首先由数据库读出15个题，加载完毕后在最后一个题的后面增加一个div为其绑定一个clck事件，内容为“点击继续取题”，每次点击这个div都会触发事件，直到题目取完为止。我想问的是这个div层怎么能随着题目的加载每次都能移动到最后一个题的后面。现在这个div层是固定在15题的后面的，
我希望的结果是点击一次，div能移动到30题的后面，再点击一次div移动到45题后面…………
给出代码如下<script type="text/JavaScript">
$(function(){  
var i=1;
$("#finish").append("点我加载题目");
$("#finish").click(function(){
//$("#finish").hide();
$.getJSON("3php.php",{page:i},function(json){   
if(json){
var cnt=json.length;
var str = "";       
$.each(json,function(index,array){      
var str = "<div class=\"single_item\"><div class=\"element_head\">";             
var str =str+"<div class=\"date\">"+array['date']+"</div>";             
var str=str+"<div class=\"author\">"+array['author']+"</div>";  
    var str=str+"<div class=\"content\">"+array['content']+"</div></div></div>"; 
$("#container").append("我是由服务器加载的题目:"+str);    
});
i++;
if(cnt<15){
 $("#finish").hide();
$(".nodata").show().html("题目加载完毕");  
}else{

}
}
   
   
});

});
})</script>
<div id="container">    
 <?php   
 $query=mysql_query("sql语句");   
 while ($row=mysql_fetch_array($query)) {   
echo "我是由数据库加载的题目";
 ?>    
 <div class="single_item" id="single_item">   
<div id="element_head">     
<div class="date"><?php echo $row['1'];?></div>          
<div class="author"><?php echo $row['2'];?></div>   
<div class="content"><?php echo $row['3'];?></div>  
</div>         
 </div>
<?php } ?> 
<center><div id="finish"></div><center>
<div class="nodata"></div>