title: How do I make a MutationObserver work more then once?
body: <p>I using to a MutationObserver so I can have a div react to changes. When it changes the changes to displayed in the div directly under, however it only runs once. If I type something it to div the input div, only the first character is displayed. I found this on the MDN</p>
  
  <p>"Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe an element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it." </p>
  
  <p>However I'm not sure how to fix this. I tried making a new observer in the callback of the first observer, in hopes it would create a chain of observers but this hasn't work. How have other people solved this?</p>
  
  <pre><code>    &lt;div contenteditable="true" class="input"&gt;&lt;/div&gt;
      &lt;div class="display"&gt;&lt;/div&gt;
  
      &lt;script&gt;
          let input= document.getElementsByClassName("input")[0];
          let display= document.getElementsByClassName("display")[0];
  
          let config={attributes:true, childList:true, characterData:true};
  
          let observer= new MutationObserver(function(mutations){
                  mutations.forEach(function(mutation){
                  if(mutation.type==="childList"){
                      display.textContent=input.textContent;
                  }
                  });
  
          });         
  
          observer.observe(input,config); 
      &lt;/script&gt;
  </code></pre>