Show recent new comment on top of others

[V]

I've been trying all day to make this work but nothing seems to work.    I have all my comments ordered by date DESC, so the most recent one appears on top. When you submit a new comment via the form, the comment appears above the form, below all the comments. It appears on top only when the page is refreshed. So I'm trying to make it go on top the first time.

 

The js is

 

<script type="text/javascript">
$(function() {
$(".submit").click(function() 
{
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var post_id = $("#post").val(); 
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment+ '&post=' + post_id;
if(name=='' || email=='' || comment=='')
{
alert('Please Give Valid Details');
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="images/ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "insert_comment.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").append(html);
$("ul#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
}return false;
}); });
</script>

 

and the comment page

 

 

<?php

$connection = dbConnect();

//$post_id value comes from the POSTS table
$post_id = $_GET['post'];

// prepare the SQL query
$sql = "SELECT * FROM comments WHERE post_id='$post_id' ORDER BY com_id DESC LIMIT 9";

$result = $connection->query($sql) or die(mysqli_error($connection)); ?>

<div id="comment-container">

<ol id="update" class="timeline">

<ul class="comments">

<?php 

while ($row = $result->fetch_assoc()) {	

//comment form vars
$com_id=$row['com_id'];
$name=$row['com_name'];
$email=$row['com_email'];
$comment_dis=$row['com_dis']; 
$com_date=$row['com_date']; 
?>

<div class="clear"></div>

<?php if(is_string($com_date)) $com_date=strtotime($com_date); ?>

<li>
    <a href="#"><img class="avatar" src="img/avatar.jpg" width="48" height="48" alt="avatar" /></a>
<div class="commenttext">
<strong><a href="<?php echo $email; ?>"><?php echo $name; ?></a></strong> 
<?php echo $comment_dis; ?>
<div class="date"><?php echo relativeTime($com_date); ?></div>
</div>
<div class="clear"></div>
</li>

<?php } ?>

</ul>

</ol>
<div id="flash"></div>

 

and insert_comment.php

 

<?php 	

require_once("functions.php");

$connection = dbConnect();

if($_POST) {


$name = $connection->real_escape_string(strip_tags($_POST["name"]));
$email = $connection->real_escape_string(strip_tags($_POST["email"]));
    $comment_dis = $connection->real_escape_string(strip_tags($_POST["comment"]));
    $comment_dis = nl2br($comment_dis);
$post_id = $connection->real_escape_string($_POST['post']);

	if (!$name || !$email || !$comment_dis) {
	echo "Please go back and submit a new post.";
	exit;
	}


	$sql = "INSERT INTO comments
                 (com_name, com_email, com_dis, post_id, com_date)
          VALUES ('$name', '$email', '$comment_dis', '$post_id', NOW())";
	  			
   	$result = $connection->query($sql) or die(mysqli_error($connection));


$sql = "UPDATE posts set total_com=total_com+1 where post_id='$post_id'"; //insert total number of comments in posts table

$result = $connection->query($sql) or die(mysqli_error($connection));

?>


<?php echo formatComment($_POST['name'],$_POST['email'],$_POST['comment'],time()); //function that echoes comments like in the first comments page, not sure how to get this on top ?>

<?php }
	else {
		echo "Access Denied!";
  } ?>

 

I'll appreciate any kind of guidance! :-\

[V]

My latest attempt:

 

$("ul.comments li:first-child").append(html);

 

it should appear in the first-child li but nothing happens..

[V]

Ok I got it! It should be

 

$("ul.comments li:first").append(html);

 

for some reason it appears below the first li but I'm sure it's an easy fix