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>