Cannot add multiple HTML code snippets to wordpress - html

Question

I have a HTML code with a canvas and a button, and all the necessary drawings are inside the draw(canvas) function.
<script>
init = (event) => {
canvas = document.getElementById("canvas")
draw(canvas);
}
window.onload = init
</script>
<canvas id="canvas" width="500" height="400"></canvas><br>
<button type="button">Button</button>
I am trying to include this code in a WordPress post, and I have managed to do so (with both the 'WPCode' and 'Insert HTML Snippet' plugins). As long as I only have one figure it works fine, but when I try to add the figure one more time later in the post, it stops working. I should have two buttons and two figures, but instead it is two buttons and just one canvas.
It seems like the two code snippets interfere with each other. If I remove the first one, the second one works just fine. How can I include two identical figures so that they don't interfere?
I have tried inserting two independent HTML code snippets in two different WordPress blocks, expecting them to function independently.

Answer 1

If you place the same code twice you are calling the same function at different points and still only referencing the first canvas block while having two blocks with the same id. Set the second block to have the id of canvas2 or similar as below.
Add the canvas block where you first inserted it:
<canvas id="canvas" width="500" height="400"></canvas><br>
<button type="button">Button</button>
Add the canvas2 later in the article:
<canvas id="canvas2" width="500" height="400"></canvas><br>
<button type="button">Button</button>
Add the new script at the very end of the article in another code snippet block:
<script>
init = (event) => {
canvas = document.getElementById("canvas");
draw(canvas);
canvas2 = document.getElementById("canvas2");
draw(canvas2);
}
window.onload = init;
</script>