buy-button-js Multiple products on same page

Question

Trying to figure out how to add multiple products to a single page using Shopify/buy-button-js?

I currently have to do it by repeating the ui.createComponent function, and call the buttons by using document.getElementById. (You can see this in the Current JS example)

How can I put the ids in an array and still call them by document.getElementById as show in the Trying JS example?

Trying JS

ui.createComponent('productSet', {
  id = [489690562602,524100337706,524102565930],

  node(id[0]).getElementById('bday'),
  node(id[1]).getElementById('gws'),
  node(id[2]).getElementById('toy'),

  options: { etc....

HTML

<div id="bday" align="center"></div>
<div id="ppb" align="center"></div>
<div id="tyc" align="center"></div>

Current JS (Just need the id: 524242288682, & node: document.getElementById('XXX'),) to change per product being imported. Everything else stays the same.

ui.createComponent('product', {
  id: 489690562602,
  node: document.getElementById('bday'),
  options: { 
    product: {
        width:'100%',
      buttonDestination: 'modal',
      contents: {
        options: false,
        price: false,
        title:false,
        img: false
      },

      styles: {
       button:{
        'width': '100%',
        'height': '60px',
        'background':'#FF6C37',
        ':hover':{'background-color':'#AC441E'},
        ':focus':{'background-color':'#AC441E'},
       },

      }
    }
  }
});

ui.createComponent('product', {
  id: 524242288682,
  node: document.getElementById('pbb'),
  options: { 
    product: {
      /*STAYS THE SAME*/
      },

      styles: {
       button:{
         /*STAYS THE SAME*/
       },

      }
    }
  }
});

ui.createComponent('product', {
  id: 524113510442,
  node: document.getElementById('tyc'),
  options: { 
    product: {
      /*STAYS THE SAME*/
      },

      styles: {
       button:{
         /*STAYS THE SAME*/
       },

      }
    }
  }
});