title: Posting Comment to Backend
body: <p>Attempting to post a comment on a portrait correctly using a JavasScript Frontend with a Rails backend.  The comment is posting, however on the frontend its showing it incorrectly.  When the user creates a comment, the comment does show however it always shows on the first portrait comment section when its posted.  However once you re-fresh the page it shows under the correct portrait.  I assume this is something to do with the way I am posting it to my backend in my POST.  This is what my current portraits code looks like used to build the portraits...</p>
  <pre><code>const buildPortrait = (portrait) =&gt; {
    let div = document.createElement('div')
    div.className = 'card'
    div.id = portrait.id
    div.innerHTML = `
          &lt;i class=&quot;far fa-window-close fa-1x&quot; id=&quot;delete&quot;&gt;&lt;/i&gt;
          &lt;img src= ${portrait.attributes.img_url} class=&quot;profile&quot; alt=&quot;Avatar&quot; &gt;
          &lt;div class=&quot;container&quot;&gt;
          &lt;h5 class='description'&gt;Caption: ${portrait.attributes.description}&lt;/h5&gt;
          &lt;form data-portrait=${portrait.id} class=&quot;comment-form&quot;&gt;
            &lt;input
              class=&quot;comment-input&quot;
              type=&quot;text&quot;
              name=&quot;comment&quot;
              placeholder=&quot;Add a comment...&quot;
            /&gt;
            &lt;button class=&quot;comment-button&quot; type=&quot;submit&quot;&gt;Post&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class=&quot;likes-section&quot;&gt;
          &lt;button class=&quot;like-button&quot;&gt; ${portrait.attributes.like} likes ♥&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        ` 
    cardContainer.appendChild(div)
  
    listenForLikes(portrait)
    commentSection(portrait)
    listenForComment(portrait)
    listenForEditComment(portrait)
    listenForDelete(portrait)
  } 
  </code></pre>
  <p>Below is the code I am attempting to use to build the comment and the have the POST correctly...</p>
  <pre><code>//create comments
    function commentSection(portrait){
        const newUl = document.createElement('ul')
        newUl.className = 'comments'
        
        portrait.attributes.comments.map(comment =&gt; {
          let li = document.createElement('li')
          li.textContent = comment.content
          newUl.appendChild(li)
          const editBtn = document.createElement('button')
          // editBtn.className = 'edit-button'
          editBtn.dataset.commentId = comment.id
          editBtn.innerHTML = `
           &lt;i class=&quot;fas fa-pen-square&quot;&gt;&lt;/i&gt;` 
          // li.appendChild(editBtn)
  
        })
        const currentCard= document.getElementById(portrait.id)
        const description = currentCard.querySelector('.description')
        description.after(newUl)
      }
  //event listen for comments
      function listenForComment(portrait){
        const portraitComment = document.getElementById(portrait.id)
        const commentForm = portraitComment.querySelector('.comment-form')
        commentForm.addEventListener('submit', (e)=&gt; {
          e.preventDefault()
          postComments(e)
          commentForm.reset()
        })
      }
  //fetch comments
      function postComments(e){
        console.log()
        data = {
          content: e.target[0].value,
          portrait_id: e.target.dataset.portrait
        }
        console.log(data)
  
        fetch(`http://localhost:3000/comments`,{
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: &quot;application/json&quot;
          },
          body: JSON.stringify(data)
        })
        .then(res =&gt; res.json())
        .then(json =&gt; {
          const ul = document.querySelector('ul')
          const li = document.createElement('li')
          li.textContent = json[&quot;data&quot;].attributes.content
          console.log(ul)
          ul.appendChild(li)
        })
      }
  </code></pre>
  <p>Any advice is gratefully appreciated!!</p>
  <p>Thanks!!</p>