実現したいこと

一定のタイミングでAjaxを使い、サーバーにアクセスしてview側に表示しているデータの差分を比較し、不足分だけを取得し、表示するようにしている。

困っていること

var data_count = $('.chat_count').length;
上記のコードで要素数をカウントしているが、Ajaxで挿入した要素数がカウントされなくて困っている。
どのようにしたら、ajaxで出力した要素数がカウントされるかご教示いただけると幸いです。

$(function() {
  var POLLLING_INVERVAL_TIME_IN_MILLIS = 10000;//10s
  (function polling() {
    if(!document.hidden) {
        getCountUp();
    }
    window.setTimeout(polling, POLLLING_INVERVAL_TIME_IN_MILLIS);
  }());


  function getCountUp() {
    var room_id = document.getElementById("room_id").value;
    //ここで、要素の数を取得している。要素の数とサーバーのレコード数を比較して不足分だけ取得するようにしている。
    var data_count = $('.chat_count').length;
    console.log(data_count);
    if(data_count > 0){
      $.ajax({
          url: `/rooms/${room_id}/get_data_ajax/?count=${data_count}`,
          type: "GET",
          data: {memos: 'text'},
          dataType: "json",
          success: function (data) {
            for(var i=0;i<data.length;i++){
              console.log(data[i].text);
              $('#chat_areat').append('<div class="row data_count"><div class="col py-2 border-bottom"><div class="user-name">' + `${data[i].text}` + '</div><div class="content">' + `${data[i].text}` + '</div></div></div>');
            }
          },
          error: function (data) {
              console.log("error");
          }
      });
    }
  }
});