I am trying to add more HTML elements to the DOM with a button's onclick using "innerHTML" and template literals. That much is working, but when I try to get access to the elements via a "getElementBy" or "querySelector", I can't; and I don't know why not. Any help is appreciated, thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adding and grabbing HTML Elements</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="add-character">Add</button>
<div id="grid"></div>
</body>
<script src="main.js"></script>
</html>
** Javascript**
let grid=document.getElementById("grid")
console.log(grid)
const addCharacter=document.getElementById("add-character")
console.log(addCharacter)
let Hp=0;
let num=0;
addCharacter.addEventListener("click",()=>{
grid.innerHTML+=`
<div id="subgrid" class="subgrid">
<br>
<div id="status" class="status">Status</div>
<br>
<div id="iniative" class="iniative">Iniative</div>
<input id="iniativeel" id="iniativeel" type="number">
<button id="inativebtn" class="inativebtn">Submit</button>
<br>
<div id="character" class="character">Character</div>
<br>
<div id="healthpoints" class="healthpoints">Healthpoints</div>
<br>
<input id="initalHp" class="initalHp" type="number">
<br>
<Button id="initalhp" class="initalhp">Submit</button>
<br>
<input id="damage" class="damage" type="number">
<br>
<button id ="damagebtn" class="damagebtn">Submit</button>
<br>
<div id="weapons" class="weapons">Weapons</div>
</div>`
})
btn()
function btn(){
let iniativeBtn=document.querySelector("#iniativebtn").textContent
console.log(iniativeBtn)
}