每次在codeigniter中完成ajax成功函数循环时，尝试将数据添加到新div

Hey guys i am trying to send the data from the loop to the div element so that i can show it one by one . but when i try to send the data it just shows all the values together what can i do ?

here is my code

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            var lastID = $('.load-more').attr('lastID');
            if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
                jQuery.ajax({
                    type:'POST',
                    url:'<?php echo base_url("user/get_all_post"); ?>',
                    data: "id=" + lastID,
                    dataType: 'json', 
                    beforeSend:function(html){
                        $('.load-more').show();
                    },
                    success:function(data){
                        var ParsedObject = JSON.stringify(data);            
                        var json = $.parseJSON(ParsedObject);
                        $PostId=json[4]['id'];
                        for(i=0;i<5;i++ )
                        {
                            var post_status = json[i]['status'];
                            var status_image = json[i]['status_image'];
                            var multimage = json[i]['multimage'];
                            alert(post_status);
                            $("#post_status").show();
                            $("#status_data").append(post_status);
                            $("#post_status").hide();
                        }
                        $('.load-more').attr('lastID', $PostId);
                    }  
                });
            }
        });
    });
</script>

but it just append the data together let me show you

what can i do to add the div every time the value goes through in the loop.

this is the html that i want to add in every div

<div class="post_status" id="post_status" style=" margin: 20px 50px 0px 40px; "> <a href="#" ><?php echo img($user_image); ?></a><a href=""><?php echo $uname; ?></a> <div class="status_post" id="status_data"></div> </div> 

You need to append the whole generated html to the related container:

$('<div class="post_status" id="post_status" style=" margin: 20px 50px 0px 40px; ">' +
    '<a href="#"><img src="'+status_image+'"></a><a href="">'+user_name+'</a>' + 
    '<div class="status_post" id="status_data">'+ post_status + '</div></div>')
 .appendTo("#the-comments-container");

You need the user_name variable though.

$("#status_data").append('<div>'+post_status+'</div>');

If I understood correctly, You can also duplicate your existing div using this method - How can i duplicate a div onclick with javascript?

Append the new information to the duplicated div, And then insert the new div into the page.

Something like this:

var yourDiv = document.getElementById('yourDiv');
var duplicatedDiv = Duplicate(yourDiv);
duplicatedDiv.innerHTML = post_status;
$("#divContainer").append(duplicatedDiv);