The solution would be to use display_element in initJsPsych. See documentation. Here is an example piece of code:

let create_div = function () {
    let div = document.createElement('div');
    div.style.width = '500px';
    div.style.height = '500px';
    document.body.append(div);
    return div;
}

let jspsych_1 = initJsPsych({display_element: create_div()});
let jspsych_2 = initJsPsych({display_element: create_div()});

const trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: 'Hello world'
};

jspsych_1.run([trial, trial]);
jspsych_2.run([trial, trial]);

However, even so, the code would not work properly; you will see that only one experiment is run. I think this is a bug with jsPsych. The problem lies here, as the querySelector method is run on document instead of the corresponding display element.

For now, your solution would be:

1. replace your jspsych library file with a downloaded copy of https://unpkg.com/jspsych@7.3.4/dist/index.browser.js
2. modify line 3862 from this.DOM_target = document.querySelector("#jspsych-content"); to this.DOM_target = this.DOM_container.querySelector("#jspsych-content");

Agree that this is a bug! Happy to merge a PR or I'll try to fix it shortly.

@jodeleeuw Created PR #3254 for this