How to make images replace each other with a button?

So, I’m trying to develop a sort of visual novel, and I’m trying to make a code to replace other images when a specific image appears, (for example, if “happy” is onscreen i want “sad” to be hidden so the pictures don’t overlap eachother)
Here’s my code:

<style>
section {
  display: none;
}

.d-block {
  display: block;
}
</style>
<section class="d-block">Horace</section>
<section>Ursa</section>
<section><img id=sad src=https://png.pngtree.com/png-clipart/20220716/ourmid/pngtree-banana-yellow-fruit-banana-skewers-png-image_5944324.png></section>
<section><img id=neutral src=https://www.shutterstock.com/image-photo/banana-bunch-five-600nw-1057197824.jpg></section>
<section><img id=happy src=https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg></section>
<section>Thus</section>

<button>Next</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
const TextShower = document.querySelector('button');
TextShower.addEventListener('click', function() {
  let hidden_section = document.querySelector('section:not(.d-block)');
  if (hidden_section != null) {
    hidden_section.classList.add('d-block');
  } else {
    TextShower.disabled = true;
    }
  });
  const Happy = document.getElementById("happy")
  if (happy.hasAttribute("d-block")) {
  document.getElementById("sad","neutral").removeAttribute("d-block")
        }
  });
    </script>

  const Happy = document.getElementById("happy")
  if (happy.hasAttribute("d-block")) {
  document.getElementById("sad","neutral").removeAttribute("d-block")
        }
  });

this is the if statement i tried to create to replace the portraits. did not work