title: .clone().appendTo - Replace element styles not working?
body: <p>I have individual three arrows. on click; I want the div below them (letsChat) to change styles and I want to clone and append relevant information in that div. I also want it to revert back to it's original state when it is clicked again or if orientation is changed to portrait.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#compositionArrow').onclick = function(){
    var letsChat = document.querySelector('.lets-chat');
    var letsChatButton = document.querySelector('.lets-chat a');
    var compositionArrow = document.querySelector('#compositionArrow')
    var compositionText = document.querySelector('.composition-text');
  
      if (letsChatButton.style.display='flex' &amp;&amp; window.matchMedia("(orientation: landscape)").matches) {
          
        compositionArrow.style.transform='rotate(180deg)';
  
        //letsChat.appendChild(compositionText).cloneNode(true);
        //compositionText.clone().appendTo.letsChat; return false;
        document.querySelector('.composition-text').clone().appendTo(document.querySelector('.lets-chat'));
        letsChat.style.background='#00BCD4';
        letsChatButton.style.display='none';
      }
      
      else if (letsChatButton.style.display='none' || window.matchMedia("(orientation: portrait)").matches){ 
        
        compositionArrow.style.transform='rotate(180deg)';
  
        letsChat.style.background='#ff8f00';
        letsChatButton.style.display='flex';
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>example can be found below: (you may have to play with window</p>
  
  <p><a href="http://artpenleystudios.com" rel="nofollow">artpenleystudios.com</a></p>