jquery not appending more than 20 times in ajax with django

i am working on blog project, when i click submit post would be created and ajax will live reload the page. its working as i expected but as soon as my post reaches 20 it would stop appending to that perticular div, but the model object is being created correctly,when i go to admin there would 25,35 or 50 model object but only first 20 would be appended?

ajax

$(document).ready(function(){
  // $("button").click(function() {
  //   $("html, body").animate({
  //     scrollTop: $('html, body').get(0).scrollHeight
  //   }, 2000);
  // });
  $(document).on('submit','#post_form',function(e){
    e.preventDefault();

    $.ajax({
      type: 'POST',
      url:"{% url 'create' %}",
      data:{
        message: $('#message').val(),
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
      },
      success:function(){

      }
    });
  });

  setInterval(function(){
    $.ajax({
      type:'GET',
      url:"{% url 'comments' %}",
      success:function(response){
        $('.display').empty();
        for(var key in response.comments){
          if (response.comments[key].name != '{{request.user}}'){
            var temp = "<div class='message_area'><p id = 'author'>"+response.comments[key].name+"</p><p id='messagetext'>"+response.comments[key].message+"</p></div><br>"
            $(".display").append(temp);
          }
          if (response.comments[key].name == '{{request.user}}'){
            var user_temp = "<div class='message_area_owner'><p id='messagetext_owner'>"+response.comments[key].message+"</p></div><br><br><br>"
            $(".display").append(user_temp);
          }
        }
      },
      error:function(response){
      console.log("no data found")
      }
    });
  }, 500);
});

html

{% if request.user.is_authenticated %}
  <div class="display"></div>
  <div class="input">
    <form id="post_form">
    {% csrf_token %}
      <input type="text" id="message" name = 'message' autocomplete="off" onfocus="this.value=''">
      <button type="submit" id="submit" onclick="scroll()">SENT</button>
    </form>
  </div>
{%else%}
  <a class="btn btn-danger" href="{% url 'login' %}" style="text-align: center;">login</a>
  <a class="btn btn-danger" href="{% url 'register' %}" style="text-align: center;">register</a>
{% endif%}

views and models as normal

when i press post btn model object is getting created but not appending to .display div if it has already 20 divs in that