jQueryの非同期通信、自動更新

###実現したいこと

プログラミングスクールでチャットアプリを作っています。ユーザー同士がメッセージを送りあう際に、非同期で両者のメッセージが閲覧できるようにする(LINEのように)課題に取り組んでいます。

###発生している問題・エラーメッセージ

エラーは起こっていないのですが、自分が送ったメッセージが相手側の画面上に非同期で更新される機能がうまく行きません。リロードすれば両者ともメッセージは表示されます。

###ソースコード

###app/assets/javascripts/message.js

$(function(){ 
  function buildHTML(message){
   if ( message.image ) {
     var html =
      `<div class="main-chat__message-list__message" data-message-id=${message.id}>
         <div class="main-chat__message-list__message__top">
           <div class="main-chat__message-list__message__top__name">
             ${message.user_name}
           </div>
           <div class="main-chat__message-list__message__top__date">
             ${message.created_at.strftime("%Y年%m月%d日 %H時%M分")}
           </div>
         </div>
         <div class="main-chat__message-list__message__bottom">
           <p class="main-chat__message-list__message__bottom__text">
             ${message.content}
           </p>
         </div>
         <img src=${message.image} >
       </div>`
     return html;
   } else {
     var html =
      `<div class="main-chat__message-list__message" data-message-id=${message.id}>
         <div class="main-chat__message-list__message__top">
           <div class="main-chat__message-list__message__top__name">
             ${message.user_name}
           </div>
           <div class="main-chat__message-list__message__top__date">
             ${message.created_at}
           </div>
         </div>
         <div class="main-chat__message-list__message__bottom">
           <p class="main-chat__message-list__message__bottom__text">
             ${message.content}
           </p>
         </div>
       </div>`
     return html;
   };
 }
$('#new_message').on('submit', function(e){
 e.preventDefault();
 var formData = new FormData(this);
 var url = $(this).attr('action')
 $.ajax({
   url: url,
   type: "POST",
   data: formData,
   dataType: 'json',
   processData: false,
   contentType: false
 })
  .done(function(data){
    var html = buildHTML(data);
    $('.main-chat__message-list').append(html);      
    $('.main-chat__message-list').animate({ scrollTop: $('.main-chat__message-list')[0].scrollHeight});
    $('form')[0].reset();
    $('.form__submit').prop('disabled', false);
  })

  var reloadMessages = function() {
    last_message_id = $('.main-chat__message-list__message:last').data("message-id");
    $.ajax({
      url: "api/messages",
      type: 'get',
      dataType: 'json',
      data: {id: last_message_id}
    })
    .done(function(messages) {
    if (messages.length !== 0) {
      var insertHTML = '';
      $.each(messages, function(i, message) {
        insertHTML += buildHTML(message)
      });
      $('.main-chat__message-list').append(insertHTML);      
      $('.main-chat__message-list').animate({ scrollTop: $('.main-chat__message-list')[0].scrollHeight});
      $('#new_message')[0].reset();
      $('.form__submit').prop('disabled', false);
      }
    })
    .fail(function() {
      console.log('error');
    });
  if (document.location.href.match(//groups/\d+/messages/)) {
    setInterval(reloadMessages, 7000);
  }
  };
});
});

githubのリンクを貼っておきます。"JavaScript/message.js"に重点をおいて見ていただけるとわかりやすいかと思います。
https://github.com/momotarou1090/chat-space3.git
ブランチはauto-renewブランチです。