How to show jquery ajax data correctly when it include in a php mysql query

The easist solution is the following.

$(document).ready(function () {
    $(".Submit").click(function () {
        var title = $(this).closest('form').find("#title").val();
        var content = $(this).closest('form').find("#content").val();
        var this_form = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_post.php",
            data: {
                title: title,
                content: content
            },
            success: function (date_added) {
                if (date_added != 0) {
                    var structure = '<div class="comment_date_added">' + date_added + '</div><div class="comment_content">' + content + '</div>';

                   $(this_form).parent().next(".post_comment").prepend(structure);
                }
            }
        });
    });
});

Change is Added

var this_form = $(this);

And changed

$(".post_comment").prepend(structure);

to

$(this_form).parent().next(".post_comment").prepend(structure);

More solutions (elegant one):

In this method we need a unique value depends on the article, and no, article title wont be enough because it will be too big and could have invalid charaters.

So first question is how to generate that unique key.

If you already have an auto increment primary key, then it can be used. But it is not recommended.

Secondly, you can generate a unqiue key at the time of creation of the article and save it in the article table as article_key or something. A 8-12 charater alpha numeric value can be considered as a good unique key.

Or, if you can't change the database, you can create this unique key at the time of displaying.

Then, Change the php to

<?php
    ...
    while($result = mysql_fetch_array($resultset))
    {
        $article_title = $result['article_title'];
        $article_key = $result['article_key']; // or generateRandomKey ();
        ...
?>
        <form id="postform" class="postform">
            <input type="hidden" name="title" id="title" value="<?=$article_title;?>" />
            <input type="hidden" name="article_key" id="article_key" value="<?=$article_key;?>" />
            <input type="text" name="content" id="content" />
            <input type="button" value="Submit" class="Submit" />
        </form>
        <div class="post_comment" id="article_<?=$article_key;?>" >
<?php
        $resultSet = @mysql_query("select * from customcomment where article='".$article_title."' order by date_added desc");
        while($resultRow = mysql_fetch_array($resultSet))
        {
            $date_added = $resultRow['date_added'];
            $comment = stripslashes($resultRow['content']);
?>
            <div class="comment_date_added"><?=$date_added;?></div><div class="comment_content"><?=$comment;?></div>
<?php
        }
?>
        </div>
        ...
<?php
    }
?>

And the js to

$(document).ready(function () {
    $(".Submit").click(function () {
        var title = $(this).closest('form').find("#title").val();
        var content = $(this).closest('form').find("#content").val();
        var article_key = $(this).closest('form').find("#article_key").val();
        $.ajax({
            type: "POST",
            url: "ajax_post.php",
            data: {
                title: title,
                content: content,
                article_key: article_key
            },
            success: function (date_added) {
                if (date_added != 0) {
                    var structure = '<div class="comment_date_added">' + date_added + '</div><div class="comment_content">' + content + '</div>';
                    $(".post_comment #article_" + article_key).prepend(structure);
                }
            }
        });
    });
});