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

I tried with inner html.

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?

container.insertAdjacentHTML('afterbegin', `
  <header>
    <div id="chat-icon">
      <div class="search"><i class="fas fa-search"></i></div>
      <div id="chat"><i class="far fa-edit"></i></div>
    </div>
  </header>
  <div id="group-list"></div>`);

container.querySelector('header #chat-icon #chat').addEventListener('click', async() => {
  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() => {
  this.chat.container.querySelector('header .search').innerHTML = `
    <div class="heading">
      <div id="back-button"><i class="fa fa-arrow-left"></i></div>
      <div id="search-bar"></div>   
    </div>`
})