Facing issue when render theme multiple times at the same page

[bilalahmad3013]

I am working on a project which have an extension for example (AppBlock).
the extension looks something like this, a very simple one
THIS IS THE LIQUID FILE (BLOCK FOLDER)
This is my div id app
"Content"
{% schema %}
{
"name": "app",
"target": "section",
"javascript": "app.js" ,
"settings": [
{ "type": "product", "id": "product", "label": "product", "autofill": true },
{ "type": "color", "id": "colour", "label": "Star Colour", "default": "#ff0000" }
]
}
{% endschema %}

THIS IS THE JS FILE I HAVE
console.log("Hiii js is linked");
let elem = document.getElementById('app');

for (let i = 0 ; i < 4 ; i++) {
elem.innerHTML += i + " "
}

So if i add this exension for the first time everthing is working fine my block printing "Content0 1 2 3" but for the second time if i add the same extension on the same page the block is printing only 'Content' the js content is not getting appended. I am getting this error.
(appjs:5 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
at app.js:5:3)
this is just a example i have to use this logic in my main project please help me out so that i can able to add same block multiple time at a same page.
Thanks in advance.