Ajax loaded comment not working

Question

My php file loops out each blog post in my database and also creates the comments section. The blogs post great. When I comment on the most recent blog post, the comment does not appear but it seems to add a line as the space expands, just does not include the comment. When I comment on the first post, it works great and exactly as expected. I can't figure out how to correct it. I thought it was a matter of add a .closest to the comment-block selector but that didn't seem to do the trick.

I appreciate any help or feedback!

PHP/HTML

<?php   // retrive post
     include('php/config.php');
    include ('php/function.php');
    dbConnect();

    $blog_query = mysql_query(
    'SELECT * 
    FROM Blog 
    ORDER BY DATE DESC');

    $date = date_create($row['DATE']);
    while($row = mysql_fetch_array($blog_query)): ?>

    <div class="post">
        <h2><?php echo $row['TITLE']?></h2>
        <h3><?php echo date_format($date, 'l, F j, Y')?></h3>
        <p><?php echo $row['CONTENT']?></p>
    </div>
    <h2>Comments.....</h2>
    <div class="comment-block">

<?php   // retrieve comments with post id
    $comment_query = mysql_query(
        "SELECT *
        FROM Comments
        WHERE BID = {$row['ID']}
        ORDER BY CID DESC
        LIMIT 15") or die(mysql_error());

        while($comment = mysql_fetch_array($comment_query)):?>

        <div class="comment-item">
            <div class="comment-post">
                <h3><?php echo $comment['UNAME'] ?> <span>said....</span></h3>
                <p><?php echo $comment['COMMENT']?></p>
            </div>
        </div>
    <?php endwhile?>
    </div>

    <h2>Submit new comment</h2>
    <!--comment form -->
    <form id="form" method="post"> 
        <div>
            <input type="hidden" name="BID" value="<?php echo $row['ID']?>">
            <label> <span>Display Name: *</span>
                <input id="uname" type="text" tabindex="1" name="commentName" required />
            </label>
        </div>
        <div>
            <label> <span>Comment: *</span>
                <textarea id="textarea" placeholder="Enter your comment here..." tabindex="2" name="commentMessage" required></textarea>
            </label>
        </div>
        <div>
            <input type="submit" id="submit" value="Submit Comment">
        </div>
    </form>     


<?php endwhile?>    
</div>

Jquery/Ajax:

var form = $('form');
var submit = $('#submit');

form.on('submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
        url: 'php/ajaxcomment.php',
        type: 'POST',
        cache: false,
        data: form.serialize(), //form serizlize data
        beforeSend: function(){
            // change submit button value text and disabled it
            submit.val('Submitting...').attr('disabled', 'disabled');
        },
        success: function(data){
            // Append with fadeIn see http://stackoverflow.com/a/978731
            var item = $(data).hide().fadeIn(800);
            $('.comment-block').append(item);

            // reset form and button
            form.trigger('reset');
            submit.val('Submit Comment').removeAttr('disabled');
        },
        error: function(e){
            alert(e);
        }
    });
});

ajajcomment.php

<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include('config.php');
include('function.php');
dbConnect();

if (!empty($_POST['commentName']) AND !empty($_POST['commentMessage']) AND !empty($_POST      ['BID'])) {
    $name = mysql_real_escape_string($_POST['commentName']);
    $comment = mysql_real_escape_string($_POST['commentMessage']);
    $BID = mysql_real_escape_string($_POST['BID']);

    mysql_query("
        INSERT INTO Comments
        (UNAME, BID, COMMENT)
        VALUES('{$name}', '{$BID}', '{$comment}')");            
}
?>

 <div class="comment-item">
<div class="comment-post">
    <h3><?php echo $name ?> <span>said....</span></h3>
    <p><?php echo $comment ?></p>
</div>
</div>

<?php
dbConnect(0);
endif?>

Answer 1

What does "php/ajaxcomment.php" return when you post a comment? Pure HTML?

I'd make the "php/ajaxcomment.php" return JSON, for example:

<?php
/*
here you do what ever you do now,
Insert the new comment to database, etc
*/

// Then you return the inserted data:
$data = array(
  'UNAME' => $username,
  'COMMENT' => $comment,
);

header('Content-Type: application/json');
print json_encode( $data );
?>

..and change the ajax:

...
...
success: function(data){
    var commentItem = $('<div/>').addClass('comment-item');
    var commentPost = $('<div/>').addClass('comment-post');
    var user        = $('<h3/>').html( data.UNAME +'<span>said...</span>' );
    var comment     = $('<p/>').html( data.COMMENT );

    commentItem.html( commentPost.html( user + comment ) ).hide().fadeIn(800);

    $('.comment-block').append(commentItem);

    // reset form and button
    form.trigger('reset');
    submit.val('Submit Comment').removeAttr('disabled');
},
...
...