How to fix elem.innerHTML not working more than once

Question

Here Im facing a strange problem. I have a button which when clicked inserts <h1>Hello</h1> to a target element. I found out that the click only works once and doesn't show any errors. Im not able to figure out why its not working.

Here's my code

const addMore = document.querySelector('#addMore');
let parentElem = document.querySelector('#target');
addMore.addEventListener('click', function() {
  parentElem.innerHTML += `
        <h1>hello</h1>
        `
})

<div class="col-md-12" id="target">
  <div class="row">
    <div class="col-md-2 mb-3">
      <div class="form-group">
        <label for="price" class="form-label small">Price</label>
        <div class="input-group">
          <span class="input-group-text">₹</span>
          <input type="number" name="price" id="price" class="form-control" placeholder="100">
        </div>
      </div>
    </div>
    <div class="col-md-2 mb-3 d-flex align-items-end">
      <button type="button" class="btn btn-primary" id="addMore">+ Add More</button>
    </div>
  </div>
</div>