How to append “comment reply” between comments

Question

I am developing a comment box for my website.

i am showing message in a UL (list). each UL child which is LI contain a table that shows the message

Url to image showing my comments Comment Image

My messages are showing using ajax and php

ajax script sends data which goes to php script after varifcation go to data base and mean time it also updated on the screen

Problem When i refresh the page or when whole page is loaded messages display in right order

But when i want to reply a message (using Ajax) which is previously added the Reply shows up at the end of all comments not where it should be.

For example

In the Image, Comment with the name of "DAVID" if i reply this message it shows after the message name "Abdul Rehman Javed Khan 0123456789" which is the last message.

Html

             <ol  class="timeline" id="update">                                  
        <?
        $retrieve = $con->select1("*", "`comments`", "page_id=" . $page_id);
        $confirm_author = 0;            
        while ($row = mysql_fetch_array($retrieve)) {
            echo'<table class="shw-comment" id="show-comment-table" ><tbody><tr>';
            $name = $con->verify_author($row['name'], $row['email'], $row['website']);                
            echo'<td align="left" colspan="9" id="name-td">' . $name;
            $niceDay = $con->perfect_date_format($row['date_and_time']);
            echo'<div align="right" id="comment-date">' . $niceDay . '</div></td></tr><tr>';
            echo'<td align="left" id="user-icon-td">';
            if ($name == "Author") {
                echo '<div class="author" id="user-icon"></div>';
            } else {
                $hash = md5(strtolower(trim($row['email'])));
                $default_usr = urlencode('http://localhost/king-of-developers/images/user-icon.png');
                echo "<div class=\"default-user\" id=\"user-icon\"><img src=\"http://www.gravatar.com/avatar/$hash.'.jpg?s=45&d=$default_usr'\"  /></div>";
            }
            echo '</td>';
            echo'<td colspan="8" id="user-comments-td" valign="top">' . $row['user_comments'] . '</td>';
            echo'</tr><tr>';
            echo'<td align="right" colspan="9" id="reply-td"><input type="button" class="reply" name="reply" value="reply" title="reply"/></td>';
            echo'<tr>
                    <td align="left" colspan="9">
                    <input id="comment-id' . $row['id'] . '" type="hidden" value="' . $row['id'] . '"/>';
            echo'</tr>';
            echo'</tbody></table></li>';
            if($row['respond'] == 1){
                $retrieve2 = $con->select1("*", "`comment_respond`", "comment_id=" . $row['id']);                    
                $confirm_author = 0;
                while ($row2 = mysql_fetch_array($retrieve2)) {
                    echo'<table class="shw-comment" id="comment-reply" ><tbody><tr>';
                    $name = $con->verify_author($row2['name'], $row2['email'], $row2['website']);
                    echo'<td align="left" colspan="9" id="name-td">' . $name;
                    $niceDay = $con->perfect_date_format($row2['date_and_time']);
                    echo'<div align="right" id="comment-date">' . $niceDay . '</div></td></tr><tr>';
                    echo'<td align="left" id="user-icon-td">';
                    if ($name == "Author") {
                        echo '<div class="author" id="user-icon"></div>';
                    } else {
                        $hash = md5(strtolower(trim($row2['email'])));
                        $default_usr = urlencode('http://localhost/king-of-developers/images/user-icon.png');
                        echo "<div class=\"default-user\" id=\"user-icon\"><img src=\"http://www.gravatar.com/avatar/$hash.'.jpg?s=45&d=$default_usr'\"  /></div>";        
                    }
                    echo '</td>';
                    echo'<td colspan="8" id="user-comments-td" valign="top">' . $row2['user_comments'] . '</td>';
                    echo'</tr><tr>';
                    echo'<td align="right" colspan="9" id="reply-td"><input type="button" class="reply" name="reply" value="reply" title="reply"/></td>';
                    echo'<tr>
                            <td align="left" colspan="9">
                            <input id="comment-id' . $row['id'] . '" type="hidden" value="' . $row['id'] . '"/>';
                    echo'</tr>';
                    echo'</tbody></table></li>';
                }    
            }
        }    
        ?>
    </ol>

Ajax

          $('.reply').click(function() {       
    var cId = $(this).closest('table').find('input[id^="comment-id"]');        
    $("#respond").val($(cId).val());
    $("#comments").focus();
});
$(".submit-comment").click(function(){
    var a="",b=0;
    var n=$("#your-name").val();
    var e=$("#your-email").val();
    var w=$("#your-website").val();
    var c=$("#comments").val();
    var pg=$("#page-no").val();
    var rp=$("#respond").val();
    var ch=$("[name=recaptcha_challenge_field]").val();
    var re=$("[name=recaptcha_response_field]").val();
    var confirmAuthor=0;
    n=$.trim(n);
    e=$.trim(e);
    w=$.trim(w);
    c=$.trim(c);
    var h="name="+n+"&email="+e+"&web="+w+"&comment="+c+"&challenge="+ch+"&response="+re+"&respond="+rp+"&page_id="+pg;
    document.getElementById("recaptcha_reload_btn").click();
    if(n==""||e==""||c==""||$.trim(re)==""){
        a+="\n Please Write Your 'Name' , 'Email' , 'Comments' and 'Captcha' Before Submiting. ";
        b++;
    }else{
        var i=/[-_@'$&`~;?%^)*(#!0-9]/;
        var temp=n;
        temp.toLowerCase();
        if(temp=="author"){
            a+="\nInvalid User Name";
            b++;
        }
        if(i.test(n)){
            a+="\nPlease Write a Correct Name ! ";
            b++;
        }
        i=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/;
        if(!i.test(e)){
            a+="\nPlease Write Valid Email Address ! ";
            b++;
        }
    }
    if(b>=1){
        alert(a);
    }
    if(b==0){
        $("#flash").show();
        $("#flash").fadeIn(400).html('<img src="images/loading.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
        $.ajax({
            type:"POST",
            url:"admin/include/ajax-comments.php",
            data:h,
            cache:false,
            success:function(a){
                $("ol#update").append(a);
                $("ol#update li:last").fadeIn("slow");
                document.getElementById("your-email").value="";
                document.getElementById("your-name").value="";
                document.getElementById("your-website").value="";
                document.getElementById("comments").value="";
                document.getElementById("respond").value="";
                $("#recaptcha_reload_btn").click();
                $("#your-name").focus();
                $("#flash").hide();                    
            }
        })
    }
    return false;
});

PHP

              <?php
        require_once('recaptchalib.php');
        $privatekey = "698754562000000000000000000000233255566";
        $resp = recaptcha_check_answer($privatekey, $_SERVER["REMOTE_ADDR"],   $_POST["challenge"], $_POST["response"]);
        if (!$resp->is_valid) {
        What happens when the CAPTCHA was entered incorrectly
        die("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
        "(reCAPTCHA said: " . $resp->error . ")");
       } 
      else 
   {
 //Your code here to handle a successful verification
require_once '../config.php';
$con = new config();
if ($_POST) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $web = $_POST['web'];
    $comment = $_POST['comment'];
    $respond = $_POST['respond'];
    $page = $_POST['page_id'];
    $name = $con->clean_input($name);
    $email = $con->clean_input($email);
    $web = $con->clean_input($web);
    $comment = $con->clean_input($comment);
    $name = $con->sanitizeHTML($name);
    $email = $con->sanitizeHTML($email);
    $web = $con->sanitizeHTML($web);
    $comment = $con->sanitizeHTML($comment);
    $con->validateNull($name, "Please Enter Your Name ");
    $con->validateEmail($email, "Please Enter Your Valid Email");
    $con->validateNull($comment, "Please Don't Leave Empty Comments");
    if ($con->errorCounter == 0) {
        $name = ucwords(strtolower($name));
        $comment = ucfirst(strtolower($comment));            
        $con->setTime_zone();
        $comment_time = date('Y-m-d H:i:s', time());
        $comment_time = $con->perfect_date_format($comment_time);
        $ip = $con->getIP();            
        if ($respond >= 1) {
            $col[0] = "comment_id"; 
            $col[1] = "name";
            $col[2] = "email";
            $col[3] = "website";
            $col[4] = "user_comments";
            $col[5] = "user_ip";
            $col[6] = "date_and_time";
            $data[0] = "'" . $respond . "'";
            $data[1] = "'" . $name . "'";
            $data[2] = "'" . $email . "'";
            $data[3] = "'" . $web . "'";
            $data[4] = "'" . $comment . "'";
            $data[5] = "'" . $ip . "'";
            $data[6] = "'" . $comment_time . "'";
            $con->insert("`comment_respond`", $col, $data);
            $con->update("`comments`", "`respond`= 1","`id`='".$respond."'");                
        }
        if ($respond == 0) {
            $col[0] = "page_id";
            $col[1] = "respond";
            $col[2] = "name";
            $col[3] = "email";
            $col[4] = "website";
            $col[5] = "user_comments";
            $col[6] = "user_ip";
            $col[7] = "date_and_time";
            $data[0] = "'" . $page . "'";
            $data[1] = "'" . $respond . "'";
            $data[2] = "'" . $name . "'";
            $data[3] = "'" . $email . "'";
            $data[4] = "'" . $web . "'";
            $data[5] = "'" . $comment . "'";
            $data[6] = "'" . $ip . "'";
            $data[7] = "'" . $comment_time . "'";
            $con->insert("`comments`", $col, $data);                
            $comment_id = mysql_insert_id();
        }
    } else {
        $arraysize = count($con->errorMsg);
        for ($i = 0; $i < $arraysize; $i++) {
            echo $con->errorMsg[$i] . "<br>";
        }
    }
    $confirm_author = 0;
    $con->close_connection();
    }
    }
    ?>
    <li>
            <?php
               if ($respond >= 1){
               echo '<table class="shw-comment" id="comment-reply">';
    }
    if ($respond == 0){
        echo '<table class="shw-comment" id="show-comment-table">';
    }
          ?>    
    <tbody>
        <?
            $name = $con->verify_author($name, $email, $web);
        ?>
        <tr>
            <td align="left" colspan="9" id="name-td">
                    <? echo $name; ?>
                <div align="right" id="comment-date">
               <? echo $comment_time; ?>
                </div>
            </td>
        </tr>
        <tr>                                
            <td align="left" id="user-icon-td">
                <?
                if ($name == "Author") {
                    echo '<div class="author" id="user-icon"></div>';
                } else {
                    $hash = md5(strtolower(trim($email)));
                    $def_usr = urlencode('http://www.kingofdevelopers.com/images/user-icon.jpg');
                    echo "<div class='default-user' id=\"user-icon\"><img  src=\"http://www.gravatar.com/avatar/$hash.'.jpg?s=45&d=$def_usr'\"  /></div>";
                }
                ?>               
            </td>
            <td  colspan="8" id="user-comments-td" valign="top">
              <? echo $comment; ?>
            </td>
        </tr>
        <tr>
            <td align="right" colspan="9" id="reply-td">
                <input type="button" class="reply" name="reply" value="reply" title="reply" />
            </td>
        </tr>
        <tr>
            <td align="left" colspan="9">
                <?
                    if($respond >= 1){
                        $conct ='comment-id'.$respond;
                        echo "<input id='$conct' type='hidden' value=''/>";
                    }
                    if($respond == 0){
                        $conct ='comment-id'.$comment_id;
                        echo "<input id='$conct' type='hidden' value=''/>";
                    }    
                ?>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

Imagelink isn't working anymore and it's pretty hard to understand the question.

If you want it to be at the begin of your ol then use:

$("ol#update").prepend(a);

Instead of:

$("ol#update").append(a);

Probably to simple, but if not then i need more details.