2つの異なるテーブルのデータを同一のviewに作成時間順に表示させたい

前提・実現したいこと

railsでグループが作成でき、その中で以下2つのことができるアプリを開発しています。
①グループメンバー同士のチャット
②グループごとに場所（store）を登録でき、そのstoreについてメンバーがコメントをすることができる。
チャットにはmessageテーブル、storeに対してのコメントはinformというテーブルを設けています。
チャット画面：views/messages/index
informが作成された時にviews/messages/indexにも表示をさせたいと思い、messageControllerのindexアクションに@informを定義することでviews/messages/indexにinformを表示させることはできました。
表示順をmessage,informどちらもを含んだ作成された順に並べたいです。

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

現状作成されたinformは全ての下に追加され、画面をリロードするとmessageが上、informが下のように別れてしまいます。
1.store#createでinformを作成
→informs/index, messages/indexに表示される。
2.messages/indexでmessageをcreate（非同期通信）
→messages/indexの1で表示されたinformの下にスクロールして表示。
3.画面をリロード
→messageが上、informが下に別れてしまう。

エラー文はありません。

該当のソースコード

#messageController (index, create)
def index
    @message = Message.new
    @messages = @group.messages.includes(:user).order("created_at DESC")
    @informs = Inform.where(params[:group_id])
end

def create
    @message = @group.messages.new(message_params)
    if @message.save
      respond_to do |format|
        format.json
      end
    else
      @messages = @group.messages.includes(:user)
      flash.now[:alert] = 'メッセージを入力してください。'
      render :index
    end
end

.show-lists__chat-main
    .show-lists__chat-main__message-lists
      .show-lists__chat-main__message-lists__contents
        - @group.messages.each do |message|
          .show-lists__chat-main__message-lists__contents__content
            .show-lists__chat-main__message-lists__contents__content__left
              .show-lists__chat-main__message-lists__contents__content__left__name
                = message.user.name
              .show-lists__chat-main__message-lists__contents__content__left__text
                = message.content
                = image_tag message.image.url, class: '.show-lists__chat-main__message-lists__contents__content__left__text__img' if message.image.present?
            .show-lists__chat-main__message-lists__contents__content__right
              .show-lists__chat-main__message-lists__contents__content__right__time-stamp
                = message.created_at
        -if @informs
          - @informs.each do |inform|
            .show-lists__chat-main__message-lists__contents__content1
              .show-lists__chat-main__message-lists__contents__content1__left
                .show-lists__chat-main__message-lists__contents__content1__left__name
                  = inform.user.name
                .show-lists__chat-main__message-lists__contents__content1__left__store-name
                  = inform.store.name
                .show-lists__chat-main__message-lists__contents__content1__left__text
                  = inform.content
              .show-lists__chat-main__message-lists__contents__content1__right
                .show-lists__chat-main__message-lists__contents__content1__right__time-stamp
                  = inform.created_at

$(function(){
  function buildHTML(message){
    if (message.image) {
      let html = `
                    <div class="show-lists__chat-main__message-lists__contents__content">
                      <div class="show-lists__chat-main__message-lists__contents__content__left">
                        <div class="show-lists__chat-main__message-lists__contents__content__left__name">
                          ${message.user_name}
                        </div>
                        <div class="show-lists__chat-main__message-lists__contents__content__left__text">
                          ${message.content}
                          <img class=".show-lists__chat-main__message-lists__contents__content__left__text__img" src="${message.image}">
                        </div>
                      </div>
                      <div class="show-lists__chat-main__message-lists__contents__content__right">
                        <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
                          ${message.created_at}
                        </div>
                      </div>
                    </div>
                  `
      return html;
    } else {
      let html = `
                      <div class="show-lists__chat-main__message-lists__contents__content">
                        <div class="show-lists__chat-main__message-lists__contents__content__left">
                          <div class="show-lists__chat-main__message-lists__contents__content__left__name">
                            ${message.user_name}
                          </div>
                          <div class="show-lists__chat-main__message-lists__contents__content__left__text">
                            ${message.content}
                          </div>
                        </div>
                        <div class="show-lists__chat-main__message-lists__contents__content__right">
                          <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp">
                            ${message.created_at}
                          </div>
                        </div>
                      </div>
                  `
      return html
    }
}
  $(function(){
    $('.chat-main__message-form__Form').on("submit", function(e){

      e.preventDefault();
      let formData = new FormData(this);
      console.log(formData)
      let url = $(this).attr('action');

      $.ajax({
        url: url,  //同期通信でいう『パス』
        type: 'POST',  //同期通信でいう『HTTPメソッド』
        data: formData,  
        dataType: 'json',
        processData: false,
        contentType: false
      })

    .done(function(data){
      let html = buildHTML(data);
      $('.show-lists__chat-main__message-lists__contents').append(html);
      $('form')[0].reset();
      $('.show-lists__chat-main__message-lists').animate({ scrollTop: $('.show-lists__chat-main__message-lists')[0].scrollHeight});
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
    })
    .fail(function() {
      alert("メッセージ送信に失敗しました");
      $('.chat-main__message-form__Form__btn-send').prop('disabled', false);
  });
  })

})
});

試したこと

hamlを見る限り画面をリロードするとこのように並んでしまうことはわかるのですが、どうすれば間にinformを入れていけるのかがわかりません。
messageのeach文の直下にinformのeach文を入れて、各inform.name, inform.contentを記述してみましたが、messageとinformが合成されて表示されるだけでした。

補足情報（FW/ツールのバージョンなど）

MySQL 5.6.47
sequel Pro
Rails 6.0.3.2