title: I am making a comment system. My problem is when I post a comment and reload the page the comment is no more. What am I doing wrong?
body: <p>I am making a comment system. My problem is when I post a comment and
  reload the page the comment is no more. What am I doing wrong?</p>
  <pre><code>/ Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  const db = getDatabase();
  
  // getting user input from form to store in firebase
  const name = document.querySelector('.form--1');
  const head = document.querySelector('.form--2');
  const message = document.querySelector('.form--3');
  </code></pre>
  <p>Here is where I get the data from the comment form for database</p>
  <pre><code>const postNewComment = function () {
  
      set(ref(db, 'comments/'), {
          Name: name.value,
          Header: head.value,
          Message: message.value
      }).then(() =&gt; {
          console.log('data stored successfully');
      }).catch((error) =&gt; {
          console.log('unsuccessful, error ' + error);
      });
  };
  </code></pre>
  <p>Everything else below is a function to create an html element and a function to receive data from database and post to dom but as I said it works but once I reload page the comment goes away.</p>
  <pre><code>const postBtn = document.querySelector('.btn--post');
  
  // creates html elements
  function elementFromHtml(html) {
      const templat = document.createElement('template');
      templat.innerHTML = html.trim();
      return templat.content.firstElementChild;
  }
  
  const postComment = function (e) {
      const sectionComments = document.querySelector('.scroll');
      e.preventDefault();
      postNewComment();
  
      // reads data from firebase database and post comment to dom
      const dbref = ref(db);
  
      get(child(dbref, 'comments/')).then((snapshot) =&gt; {
          if (snapshot.exists()) {
              const commentData = snapshot.val();
              console.log(commentData);
  
              const html = `
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;comments&quot;&gt;
                      &lt;figure class=&quot;comments__shape bg-color&quot;&gt;
                          &lt;img
                          src=&quot;&quot;
                          alt=&quot;&quot;
                          class=&quot;comments__image&quot;
                          /&gt;
                          &lt;figcaption class=&quot;comments__caption&quot;&gt;${commentData.Name}&lt;/figcaption&gt;
                      &lt;/figure&gt;
                      &lt;div class=&quot;comments__text&quot;&gt;
                          &lt;h3 class=&quot;heading-tertiary u-margin-bottom-small f-title&quot;&gt;
                          ${commentData.Header}
                          &lt;/h3&gt;
                          &lt;p class=&quot;comments__story&quot;&gt;
                          ${commentData.Message}
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  `;
  
  
              sectionComments.appendChild(elementFromHtml(html));
          } else {
              console.log('no data found');
          }
      }).catch((error) =&gt; {
          console.log('unsuccessful, error ' + error);
      });
  
      // reset feilds
      document.querySelector('.form').reset();
  
  };
  postBtn.addEventListener('click', postComment);
  </code></pre>