jQuery not appending comment

Question

So this jQuery is to submit a comment on a status of a social site that I am working on.

Basically my issue is plain and simple. I cannot get jQuery to append to the closest div. It does not append to the closest .status-comment which is the div that the comments are wrapped in..

As you can see i have an alert that will display "hi" which works when I post a comment.. So I know it gets THAT far in the script, it just won't append. i don't know why. Any help would be appreciated my friends.

    $(".add-comment").bind("submit", function() { 
 var comment = $(this).closest(".commentInput").attr('value'); 
 if(comment != ""){ 
  $.ajax({ 
   type : "POST", 
   dataType : "json", 
   cache : false, 
   url : "/ajax/add-comment.php", 
   data : $(this).serializeArray(), 
   success : function(result) { 
    if(result.result == "success"){ 
    alert("hi");
      $(this).closest('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>"+comment+"</span></p><hr>");
      $("#comment").val("");         
    }else{ 
     alert("Well it looks like you failed");
    } 
   }, 
   error : function() { 
    alert("An error occurred, please try again later."); 
   } 
  }); 
 }else{ 
  alert("You should probably write a comment before posting it");
 } 
 return false;
});

And here is the HTML markup, echo'd in PHP

Comment input to submit the comment:

<!-- comment box -->
        <form class="add-comment" method="post">
        <img class="comment-thumbnail" src="/userphotos/'.$acct['photo'].'"/> <span><input type="text" name="comment" class="form-control commentInput" placeholder="Comment" autocomplete=off>
        <input type="hidden" name="pid" value="'.$aStatus['status']['id'].'">
        </form></span></div>
        <!-- end comment box -->

And here is the makrup of which all the comments are echoed

echo '<div class="status-container">';
    foreach($status as $aStatus){
        echo '<div id="post_id_'.$aStatus['status']['id'].'" class="panel panel-default status post-box">';
        echo '<div class="panel-heading">
        <img class="statusThumbnail img-thumbnail" src="/userphotos/'.$aStatus['user']['photo'].'"/> <h6><a href="/profile?id='.$aStatus['user']['id'].'">'.$aStatus['user']['first'].' '.$aStatus['user']['last'].'</a></h6></div>';
        echo '<div class="panel-body">';
        echo '<p>'.$aStatus['status']['status'].'</p>';
        echo '<p><a><i class="glyphicon glyphicon-thumbs-up"></i> Like</a> · <a style="cursor:pointer;" class="status-comment-link"><i class="glyphicon glyphicon-comment"></i> Comment</a> - <abbr style="font-weight:bold; border-bottom:none;" title="'.date("l, F jS, Y g:i:s A",$aStatus['status']['post_time']."").'">about '.ago($aStatus['status']['post_time']."").'</abbr></p>';
        echo '</div>';
        echo '<div class="panel-footer">';
        echo '<div class="status-comment">';

Relationship between status-comment and add-comment

echo '<div class="status-comment">';

    $comment = $account->get_comments($aStatus['status']['id']);
    if(!isset($comment['error'])){
        foreach($comment as $aComment){
            echo'

        <p><a href="/profile?id='.$aComment['user']['id'].'"><img class="statusThumbnail img-thumbnail" src="/userphotos/'.$aComment['user']['photo'].'"/></a> <span><strong>'.$aComment['user']['first'].' '.$aComment['user']['last'].'</strong></span></p>
        <p><span>'.$aComment['comment']['comment'].'</span></p>
        <hr>';
        }
    }

echo    '
        </div>
        <!-- comment box -->
        <form class="add-comment" method="post">
        <img class="comment-thumbnail" src="/userphotos/'.$acct['photo'].'"/> <span><input type="text" name="comment" class="form-control commentInput" placeholder="Comment" autocomplete=off>
        <input type="hidden" name="pid" value="'.$aStatus['status']['id'].'">
        </form></span></div>
        <!-- end comment box -->';

        echo '</div>';

Answer 1

the problem is the keyword this inside the ajax success handler does not refer the add-comment element, you can use a closure variable as shown below

$(".add-comment").bind("submit", function () {
    var $this = $(this);
    //use val() to get the value, also you may have to use `$this.find(".commentInput").val()`
    var comment = $.trim($this.closest(".commentInput").val());
    if (comment != "") {
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: "/ajax/add-comment.php",
            data: $(this).serializeArray(),
            success: function (result) {
                if (result.result == "success") {
                    alert("hi");
                    //this here does not refer the `add-comment` element, use a closure variable
                    $this.closest('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>" + comment + "</span></p><hr>");
                    $("#comment").val("");
                } else {
                    alert("Well it looks like you failed");
                }
            },
            error: function () {
                alert("An error occurred, please try again later.");
            }
        });
    } else {
        alert("You should probably write a comment before posting it");
    }
    return false;
});

The problem turned out to be that the status-comment element was not a ancestor element of the add-comment element. So the answer was

$this.closest('.panel').find('.status-comment').append("<p><a href='/profile?id=<?php echo $acct['id']; ?>'><img class='statusThumbnail img-thumbnail' src='/userphotos/<?php echo $acct['photo']; ?>'></a> <span><strong><?php echo $acct['first']; ?> <?php echo $acct['last'];?></strong></span></p><p><span>" + comment + "</span></p><hr>");