如何将模板克隆到具有相同类的多个父项？

Question

我有一个单页应用程序，当我打开同一个应用程序的多个窗口并写一些东西时，它应该在所有应用程序中复制。但它只在一个窗口中显示第一个窗口。我收到此错误：未捕获DOMException：无法执行＆＃39; insertBefore＆＃39; on＆＃39;节点＆＃39;：插入新节点的节点不是该节点的子节点。

这是我的尝试

  let tempHistory = document.querySelector('#tempHistory')
  let cloneHistory = document.importNode(tempHistory.content, true)
  let prevEle = document.querySelector('.fldst')
   document.querySelectorAll('.chat-history').forEach(function (event) { // the new message cannot be inserted to new node parent that it's not the parent
  event.insertBefore(cloneHistory, prevEle)
  document.querySelectorAll('.userHistory').forEach(function (event) {
    event.innerHTML = document.querySelector('.userHistory').value = chatHistory
   })
 })

克隆模板的HTML

<div class="chat-history">

              <div class="chat-message clearfix">

               <!-- <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32"> -->

                <div class="chat-message-content clearfix">

                  <span class="chat-time">13:35</span>

                  <h5>server</h5>

                  <p class="serverRespond"></p>

                </div> <!-- end chat-message-content -->

              </div> <!-- end chat-message -->

              <hr>
           <template id="tempHistory">
              <div class="chat-message clearfix">

                <div class="chat-message-content clearfix">

                  <span class="chat-time">13:37</span>

                  <h5>the user</h5>

                  <p class="userHistory"></p>

                </div> <!-- end chat-message-content -->

              </div> <!-- end chat-message -->
              <hr>
           </template>


              <fieldset class="fldst" >
                    <textarea name="textarea" id="userMessage"
                    rows="2" cols="40" placeholder="Type your message…"></textarea>
                <button id="send" >send</button>
              </fieldset>

消息历史记录应该在所有聊天框中，而不仅仅是第一个。