Why are my `addEventListen` buttons only working once?

Question

I have three functions all of which contain contents.innerHTML = 'some HTML';.

These functions are to rewrite the innerHTML of the div with an id of contents when called.

I also have three buttons on the nav bar which are specified at the top of each functions innerHTML. I.E the buttons themselves are also being rewritten along with the rest of the HTML when a function is called.

These buttons each have their own separate id and therefore they each have a document.getElementById('button-id'); in the JS file.

I then use the following event to call each function:

buttonName.addEventListener('click', () => {
  functionCall();
});

My problem is that my buttons work only once. After I've clicked any of them once they do not work again. I feel like the reason is staring me in the face but I just can't see it.

HTML:

<main>
    <div id="content"></div>
</main>

JS:

const displayUser = () => {
  content.innerHTML = `
  <div class="nav-panel">
    <a class="nav-div-l nav-pic-bg hover"><img class="nav-pic-l nav-img" src="${img.arrows[2]}" alt="Logout Arrow">
    <h2 id="logout-btn">Back</h2></a>
    <a id="user-btn" class="nav-div-c hover"><img class="nav-pic-c nav-img" src="${img.user[0]}" alt="User Picture">
    <h2>Username</h2></a>
    <a id="settings-btn" class="nav-div-r hover hide-mobile"><h2>Settings</h2>
    <img class="nav-pic-r nav-img settings-img" src="${img.symbols[2]}" alt="Settings Cog"></a>
    <a class="settings-btn hide-desktop"><img class="nav-img" src="${img.symbols[2]}" alt="Settings Cog"></a>
  </div>

  --- MORE NON NAV RELATED HTML ---
  `;
};

All three functions look exactly the same as this in terms of the nav HTML.

displayLists(); // load page with displayLists

const logoutBtn = document.getElementById('logout-btn'); // nav links
const userBtn = document.getElementById('user-btn');
const settingsBtn = document.getElementById('settings-btn');

logoutBtn.addEventListener('click', () => {
  displayLists()
}); // change to lists page

userBtn.addEventListener('click', () => {
  displayUser()
}); // change to user page

settingsBtn.addEventListener('click', () => {
  displaySettings()
}); // change to settings page