Different varying P5JS sketches on a single HTML canvas container

[ancient valve]

Hello!

I had created a number of educational applications (sketches) with the help of p5js and I want to try display them on my website.
Instead of putting each application/sketch on a separate HTML file I decided to add some dropdown menus, which will indicate the type of application the user wishes to interact with.
These dropdown selections also happen to indicate the Path to the p5js sketch files.

However the issue I ran into was that when I tried to replace the initial p5js sketch file with a new p5js sketch from the new file Path, it failed to delete the old p5js DOM elements and also failed to load the new p5js DOM elements in the new file. I suspect the reason why it failed to load the new DOM elements is because it doesnt access the "setup" function on the new sketch, and instead runs the "draw" function right away.
So I guess the first questions would be, how do I properly remove/replace an old sketch with its container from the HTML page? Additionally, is there a way to make it go through the "setup" function without skipping it when replacing the initial p5js sketch with a new one?

Finally, what are some common practices for this sort of operation?
I.e, what approaches do people take, to display different p5js canvases (which have different dimensions as well as different DOM elements) on a single HTML canvas container element, based on the users chosen options?

I would really like to avoid creating a separate HTML file for each sketch, as I believe that wouldnt be as user friendly, since I have close to 100 of these applications.
It would be lovely to have them all on a single page 🙂

Thanks for the suggestions and replies in advance!

Different varying P5JS sketches on a single HTML canvas container

[lone berry]

iframe possibly?

[minor marlin]

P5 offers an 'instance' mode: https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace. If you use that it should only be a matter of clearing the old html node and remove references to the old instance, before creating the instance with the new sketch.

Like this: https://editor.p5js.org/tobidot/sketches/vWz7MbXrp

You probably need to adjust your sketches though, as you need to call sketch.background(0) instead of background(0).

[celest cloud]

As suggested by tobi you can take help of instance mode by using p5() function

Just define bunch of <div> with id in your html which will be the parent of corresponding canvas

I did something like this in past

<div id="mydiv">
<div/>

const mysketch=( p )=> {
  

  p.setup = function() {
    p.createCanvas(640,640);
  };

  p.draw = function() {
    p.background(21);

  };
};

new p5(mysketch,"mydiv" );

[strong kernel]

There is a video by Shiffman sir as well, you can check that too