jquery - css selectors after ajax request (comments system) -

problem:

after adding comment on webpage works property, mean added comments want them slide down last added comment. think problem css selectors, comments should on last comments on website. 1 selector have type it?

anybody can me it? hope clear.

$(function() {    "use strict";    var commentsform = $('#commentsform');    var errortemplate = '<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;{error}</div>';    var successtemplate = '<div class="alert alert-success"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;{error}</div>';    var commentstemplate = '<div class="row" id="comments"><div class="col-md-2 col-sm-2 hidden-xs"><figure class="thumbnail">{photo}<figcaption class="text-center">{username}</figcaption></figure></div><div class="col-md-10 col-sm-10"><div class="panel panel-default arrow left"><div class="panel-body"><header class="text-left"><div class="comment-user"><i class="fa fa-user"></i> {username}</div><time class="comment-date"datetime="{date}"><i class="fa fa-clock-o"></i> {date}</time></header><div class="comment-post">{comment}</div></div></div></div></div>';    var messages = $('#messages');    var comments = $(''); //witch 1 selector have select it?      commentsform.submit(function() {      $.ajax({        datatype: "json",        url: '/users/ajax/add-comments/',        type: 'post',        data: commentsform.serialize(),        success: function(response) {          if (response) {              if (response.errors) {              errortemplate = errortemplate.replace(/\{error\}/, response.msg);              messages.show();              messages.html(errortemplate);              settimeout(function() {                messages.slideup(1500);              }, 1000);              return false;            } else {              $('#commentsform')[0].reset();              var comment = commentstemplate;              successtemplate = successtemplate.replace(/\{error\}/, response.msg);              messages.show();              messages.html(successtemplate);              settimeout(function() {                messages.slideup(1500);              }, 1000);                comment = comment.replace(/\{photo\}/, response.avatar);              comment = comment.replace(/\{username\}/, response.username);              comment = comment.replace(/\{comment\}/, response.comment);              comment = comment.replace(/\{date\}/, response.date);              comments.append(comment);              comments.find('#comments ::after').slidedown();            }            }        }      });      return false;    });    });

<section class="comment-list">    <div class="row comments">      <div class="col-md-10 col-sm-10">        <div class="panel panel-default arrow left">          <div class="panel-body">            <header class="text-left">              <div class="comment-user">                <i class="fa fa-user"></i>              </div>              <time class="comment-date" datetime="">                <i class="fa fa-clock-o"></i>               </time>            </header>            <div class="comment-post"></div>            </div>        </div>      </div>    </div>  </section>

i don't know how fix that!

add of following last statement in success callback of ajax.

use last()

$('.comments').last().slidedown(); 

or

you can use :last pseudo-selector:

$('.comments:last').slidedown(); 

both of these give last element having comments class