モーダルウィンドウにてinputタグの値を取得し、送信と同時に値を画面に表示させたい

前提・実現したいこと

現在、modalwindowのinputにて記入した
値を受け取って
divに追加するという作業をしています。
firebaseを使用してデータを管理し、
submitするたびに最新順に並べていくイメージです。

(modal window)
title□　□　□
sentence□　□　□
submit
↓

<div class="main"> <div class="title"><text追加/div> <div class="sentence">sentence追加</div> </div> . . .

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

しかし、まずfirebaseのrealtime databaseにrefをとっても表示すらされない状況です。
また、console errorとして
https://gyazo.com/93812126f6759c381c21f710e7d32023
上記のようにpushができないとの表示がされています。
refがdatabaseに反映すらもされていないので、当たり前のエラーかとは
思いますがいろいろ試しても動かないため、皆さんの助けを頂きたいです。

該当のソースコード



firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log('ログインしました');
  } else {
    console.log('ログインしていません');

    firebase
      .auth()
      .signInAnonymously() // 匿名ログインの実行
      .catch((error) => {
        // ログインに失敗したときの処理
        console.error('ログインエラー', error);
      });
  }
});
const createMovieDiv=(movieId,movieData)=>{
  const $divTag=$("#love-template>.one-movie").clone();

  $divTag.find(".movie-title").text(movieData.movieTitle);

  $divTag.find(".movie-sentence").text(movieData.movieSentence);

  $divTag.attr("id",`movie-id-${movieId}`);
  return $divTag;
};
const resetmovieshelfView=()=>{
  $("#movie-list").empty();
}
const addMovie=(movieId,movieData)=>{
const $divTag=createMovieDiv(movieId,movieData);
  $divTag.appendTo("#movie-list");

};
const loadMovieshelfView = () => {
  // resetmovieshelfView();

const moviesRef=firebase
.database()
.ref("movies")
.orderByChild("createdAt");
console.log(moviesRef)
// moviesRef.off("child_removed");
moviesRef.off("child_added");

moviesRef.on("child_added",(movieSnapshot)=>{
  const movieId =movieSnapshot.key;
  const movieData =movieSnapshot.val();
addMovie(movieId,movieData);
   

});
};

// const resetAddMovieModal=()=>{
//   $("#movie-form")[0].reset();
//   ("#submit_add_movie")
//   .prop("disabled",false)
//   .text("保存する");
// };


$("#movie-form").on("submit",(e)=>{
  e.preventDefault();

  $("#submit_add_movie")
  .prop("desabled",true)
  .text("送信中");
})

$("#submit_add_movie").on("click",(e)=>{
  e.preventDefault();
 $("#add-movie-modal").modal("hide");
 resetAddMovieModal();
})
const movieTitle=$("#add-movie-title").val();
const movieSentence=$("#add-movie-sentence").val();


const movieData={
  movieTitle,
  movieSentence,
  createdAt:firebase.database.ServerValue.TIMESTAMP,
};
firebase
.database()
.ref("movies")
.push(movieData)
.then(()=>{
$("#add-movie-modal").modal("hide");
resetAddMovieModal();
})

.catch((error)=>{
  console.error("エラー",error);
  $("#add-book__help")
    .text("保存できませんでした")
    .fadeIn();
});

loadMovieshelfView();

コード

また、htmlは下記となります。

<div class="main">
  <div id="movie-list"></div>

</div>
  
</div>

</section>
<section id="love-template">
<div class="one-movie">
    <div class="movie-title"></div>
        <div class="movie-sentence"></div>
</div> 
</section>
コード

試したこと

初めは、databaseがundefinedになってしまっていたので
const db=firebase.database().ref(movies)
と定義し修正を加えましたが効果はございませんでした。
エラーを見る限り、moviesと表示させるためのmoviesentenceが
undifinedなので書き方に問題があるのかもしれません。