Can't adding more js coded buttons to my wordpress site

See more:

Javascript

error-handling

, +

I am wondering if anyone may know a quick fix to this issue. Right now while applying a single javascript to a WordPress block its working fine.

Once adding a second widget with similar code then it's causing some type of conflict with the first one.. perhaps this may be because they are using the same name or sharing some type of information.

I'll post both code snippets below & you may know a way to completely separate them so they do not recognize each-other and conflict.

These buy now Java script buttons from Xsolla & they each have different values, I need to add a total of 10 12 but right now I cannot add more than one without some type of conflict.

Code 1: var options = { access_token: 9upbu4RrjLChk8PgP42n5LqSmqANijKY, theme : { foreground: green, background: dark }, lightbox: { height: 700px, spinner: round }, target_element: #XS-pay2play-widget }; var s = document.createElement(script); s.type = text/javascript; s.async = true; s.src = https://cdn.xsolla.net/embed/pay2play/2.3.0/widget.min.js; s.addEventListener(load, function (e) { var widgetInstance = XPay2PlayWidget.create(options); }, false); var head = document.getElementsByTagName(head)[0]; head.appendChild(s);

Code 2: var options = { access_token: 9upbGoqnbonvXqyfgaBtsDcyWnv0FXEe, theme : { foreground: green, background: dark }, lightbox: { height: 700px, spinner: round }, target_element: #XS-pay2play-widget }; var s = document.createElement(script); s.type = text/javascript; s.async = true; s.src = https://cdn.xsolla.net/embed/pay2play/2.3.0/widget.min.js; s.addEventListener(load, function (e) { var widgetInstance = XPay2PlayWidget.create(options); }, false); var head = document.getElementsByTagName(head)[0]; head.appendChild(s);

The blog I need help with is https://www.legioneternalwar.com/crowdfunding/ You can see a buy button below and there is a spouse to be a buy button for all packages but they are conflicting with each other.

What I have tried:

Code 1: var options = { access_token: 9upbu4RrjLChk8PgP42n5LqSmqANijKY, theme : { foreground: green, background: dark }, lightbox: { height: 700px, spinner: round }, target_element: #XS-pay2play-widget }; var s = document.createElement(script); s.type = text/javascript; s.async = true; s.src = https://cdn.xsolla.net/embed/pay2play/2.3.0/widget.min.js; s.addEventListener(load, function (e) { var widgetInstance = XPay2PlayWidget.create(options); }, false); var head = document.getElementsByTagName(head)[0]; head.appendChild(s);

Code 2: var options = { access_token: 9upbGoqnbonvXqyfgaBtsDcyWnv0FXEe, theme : { foreground: green, background: dark }, lightbox: { height: 700px, spinner: round }, target_element: #XS-pay2play-widget }; var s = document.createElement(script); s.type = text/javascript; s.async = true; s.src = https://cdn.xsolla.net/embed/pay2play/2.3.0/widget.min.js; s.addEventListener(load, function (e) { var widgetInstance = XPay2PlayWidget.create(options); }, false); var head = document.getElementsByTagName(head)[0]; head.appendChild(s);