Handling multiple call to a script

I'm working in an embed script while loads HTML form with JS validation while loaded in web pages. For now only one script loads on a page. If we add more embed script on a single page, the last added or loaded one will work & its related form & validation will execute. What I'm trying is to run multiple embed scripts in a single page.

Here is the current embed script pattern which is placed in HTML page:

<script src="http://link-to-my-embed-code-executer/embed_form.js"></script>
<div id="12345wertyui67890" class="form_wrap"><!-- HTML form with validation loads here --></div>
<script>
    window.onload = function() {
        EmbedManager.embed({
            key:"12345wertyui67890",
            is_embed_form:"1",
            external_style:"1"
        })
    }
</script>

Here is the current script in embed_form.js

var EmbedManager = {
    key: '',
    is_embed_form: !0,
    external_style: 0,
    resizeCallback: function() {},
    init: function(embedParams) {
        EmbedManager.key = embedParams.key;
        EmbedManager.is_embed_form = embedParams.is_embed_form;
        EmbedManager.external_style = embedParams.external_style;
        EmbedManager.serverUrl = ''; // Here is the URL which provide HTML Form as response
    },
    embed: function(embedParams) {

        var xhr = new XMLHttpRequest();
        xhr.open('POST', EmbedManager.serverUrl);        
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.onload = function() {
            if (xhr.status !== 200) {
                document.getElementById(EmbedManager.key).innerHTML = "Unable to load form"
            }
            var response = JSON.parse(xhr.responseText);

            // Attempt to get the element using document.getElementById
            var elementDOC = document.getElementById(EmbedManager.key);
            // If it isn't "undefined" and it isn't "null", then it exists.
            if ((typeof(elementDOC) != 'undefined') && (elementDOC != null) && (EmbedManager.is_embed_form)) {
                // Only for Form, not used in LP
                document.getElementById(EmbedManager.key).innerHTML = response.form_html;
            }
        }

        // More code here to load Form in place of embed script & do validations

    }
}

I'm trying to manage the updates in JS file because embed scripts are already provided to clients & I'm not interested in making bigger updates in those embed scripts. If it could be handled inside the JS file, it will be better.

What I'm trying to do is add a new function remapEmbed which will be a copy of codes in current embed function & also after that will replace codes in embed function to such a manner to collect multiple requests from embed scripts & make an array, later I will call remapEmbed function to do the rest. I know little changes will be needed there also, I will look into it later.

Here is the expected script in embed_form.js

var EmbedManager = {
    key: '',
    is_embed_form: !0,
    external_style: 0,
    resizeCallback: function() {},
    init: function(embedParams) {
        EmbedManager.key = embedParams.key;
        EmbedManager.is_embed_form = embedParams.is_embed_form;
        EmbedManager.external_style = embedParams.external_style;
    },
    remapEmbed: function(embedParams) {
        // Code which was in `embed` function
        // More code here to load Form in place of embed script & do validations
    },
    embed: function(embedParams) {
        // Code to collect request & make a array
        // Expecting to add codes here

        // Later will call `remapEmbed` function & do rest.
        EmbedManager.remapEmbed(embedParamsOne);
    }
}

But the issue is that I'm getting only the call from the last embed script which is added on the page. It might be because of the last call overwriting the previous ones. How can I handle multiple requests?

Here I'm adding the Codepen, so you can check the code.