Please tell me why only first click event is working? [duplicate]

My goal is that when I click on a button it will display other buttons hide only the button I clicked. It’s working on first attempt but then it’s not working. Please tell me why this is happening?

const sample = document.getElementById('sample')
const h1 = document.getElementById('h1')
const h2 = document.getElementById('h2')
const h3 = document.getElementById('h3')
const h4 = document.getElementById('h4')
h1.addEventListener('click', () => {
  sample.innerHTML = `
            <h4>H2</h4><button id="h2">h2</button>
            <h4>H3</h4><button id="h3">h3</button>
            <h4>H4</h4><button id="h4">h4</button>`
})
h2.addEventListener('click', () => {
  sample.innerHTML = `<h4>H1</h4><button id="h1">h1</button>
        <h4>H3</h4><button id="h3">h3</button>
        <h4>H4</h4><button id="h4">h4</button>`
})
h3.addEventListener('click', () => {
  sample.innerHTML = `<h4>H1</h4><button id="h1">h1</button>
        <h4>H2</h4><button id="h2">h2</button>
        <h4>H4</h4><button id="h4">h4</button>`
})
h4.addEventListener('click', () => {
  sample.innerHTML = `<h4>H1</h4><button id="h1">h1</button>
        <h4>H2</h4><button id="h2">h2</button>
        <h4>H3</h4><button id="h3">h3</button>
    `
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="sample" id="sample">
    <h4>H1</h4><button id="h1">h1</button>
    <h4>H2</h4><button id="h2">h2</button>
    <h4>H3</h4><button id="h3">h3</button>
    <h4>H4</h4><button id="h4">h4</button>
  </div>
  <script src="./app.js"></script>
</body>

</html>