Displaying randomised items from separate arrays on click

Hi All - custom code newbie here! I need a hand with a project I’m working on.

I’m trying to pull two random items from two separate arrays simultaneously when a user clicks a button. I want the two items to be displayed inside separate divs on the page (named bottom and top).

I’ve got the button working and the randomised items are being pulled through onto the page, but the values are displayed next to each other in the same div (bottom).

How can I display the values separately in the bottom and top divs?

As an aside, I’ve used code embeds to create the divs and button but can’t control their layout as easily as native Webflow elements. How can I display the divs side-by-side? Even better would be to use native elements - could I get the code to work using IDs and custom attributes?

Very grateful for any help.


Here is my site Read-Only: Webflow - Innovation Engine V1

let array1 = ["item1", "item2"];
let array2 = ["item1", "item3"];
let arrayItem1 = array1[Math.floor((Math.random()*10)) % 2];
let arrayItem2 = array2[Math.floor((Math.random()*10)) % 2];
document.querySelector('#Top').innerHTML='<p>'+ arrayItem1 +'</p>';
document.querySelector('#Bottom').innerHTML='<p>'+ arrayItem2 +'</p>';