[jeansymolanza]

I've been working on a commenting system over the past few days but have encountered several problems:

• Message comments are not appended to the correct div - how do I go about appending a comment to the correct div and then creating a new div that would allow for another comment to be made
  
• Whenever the user clicks on the 'Comment' link for an element much lower down the page, they get moved up to the top of page which causes confusion

How do I resolve these issues?

I have posted up a demo of my system here because there is quite a bit of code to go through:http://jsfiddle.net/BQ84D/3/

Here is the relevant JS code:

$(document).ready(function () {
    $('.comment_button').click(function () {
        var ID = $(this).attr("id");
        var comment = $("#ctextarea" + ID).val();
        var dataString = 'comment=' + comment + '&msg_id=' + ID;
        if (comment.match(/^\s*$/)) {
            $(function () {
                $("#dialog-message2").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        } else {
            var stuff = '<div class="stcommentbody" id="stcommentbody"><div class="stcommentimg"><img src="sri.jpg" class="small_face"/></div> <div class="stcommenttext">' + comment + '<div class="stcommenttime"></div> </div></div>';
            $("#commentload" + ID).append(stuff);
            $("#ctextarea" + ID).val('');
            $("#ctextarea" + ID).focus();
        }
        return false;
    });
});