title: Toggle buttons issue
body: <p>If I click on search icon it will open back button and search bar. Again I click on the back button it will open search icon</p>
  <p>I tried with inner html.</p>
  <p>If I click on search icon I used innerhtml to display back button and search bar.
  But if I click on back button how to render search icon?</p>
  <pre class="lang-js prettyprint-override"><code>container.insertAdjacentHTML('afterbegin', `
    &lt;header&gt;
      &lt;div id=&quot;chat-icon&quot;&gt;
        &lt;div class=&quot;search&quot;&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;div id=&quot;chat&quot;&gt;&lt;i class=&quot;far fa-edit&quot;&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;div id=&quot;group-list&quot;&gt;&lt;/div&gt;`);
  
  container.querySelector('header #chat-icon #chat').addEventListener('click', async() =&gt; {
    this.chat.container.querySelector('.groups').remove();
    this.chat.container.insertAdjacentElement('afterbegin', this.createGroup.container);
    await this.createGroup.load();
  });
  
  container.querySelector('header .search').addEventListener('click', async() =&gt; {
    this.chat.container.querySelector('header .search').innerHTML = `
      &lt;div class=&quot;heading&quot;&gt;
        &lt;div id=&quot;back-button&quot;&gt;&lt;i class=&quot;fa fa-arrow-left&quot;&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;div id=&quot;search-bar&quot;&gt;&lt;/div&gt;   
      &lt;/div&gt;`
  })
  </code></pre>