Electron: Cannot find DOM elements from child window

I am trying to send a parameter and its property from the main process to the renderer process, then append that property value as a string onto a div in my html/ child window. However, the renderer process cannot find the Id I have specified and returns the error:

Cannot read property 'append' of null at EventEmitter.<anonymous>

I thought I could get around this error by sourcing the renderer file to my html but that makes the html look for other elements that are also sourced to that renderer process as I have multiple html files connected to it and it doesn't work either way.

So after this, I created another javascript file specifically for that html window but that window cannot recieve events from the main process.

Here is my current code:

HTML

 <div id="brst_files">
       </div>

<script type="text/javascript" src="./renderer.js">
    </script>
    <script>
    //Open the dialog for burst button
    let brstfile = document.getElementById('brst_add_files')
     brstfile.addEventListener('click', function(event){
      console.log('recieved')
      ipcRenderer.send('brst_add_files')
      console.log('add file')
    })

    ipcRenderer.on('brstfiles', function(event){
    console.log('html recieved')
    document.getElementById('brst_files').append('data.filePath')
    console.log('file path recieved')
  })
    </script>

Main

 //Open burst window dialog menu
 ipcMain.on('brst_add_files', function(event){
  console.log('adding files')
  dialog.showOpenDialog({properties:['openFile','dontAddToRecent','multiSelections'],
  filters: [
    { name: 'All Files', extensions: ['*'] }

    //Recieve and send the file path data
  ]}).then((data) => {
  console.log(data.filePaths);
  mainWindow.webContents.send('brstfiles', data.filePaths)
  console.log('file path sent')
});
})
}

Renderer

//Burst create window
let brstwindow = new BrowserWindow({
  width:400,
  height:415,
  frame: false,
  useContentSize: true,
  backgroundColor: '#00000000',
  alwaysOnTop: false,
  transparent: true,
  resizable: true,
  webPreferences: {
    nodeIntegration: true,
    enableRemoteModule: true,
    useContentSize:true
  }
 });

 brstwindow.loadURL(url.format({
  pathname: path.join(__dirname, 'Burstcreate.html'),
  protocol: 'file',
  slashes:true
  
})); 
brstwindow.webContents.openDevTools()
brstwindow.hide()

//Open the burst button window
let brstopen = document.getElementById('burstbtn')
brstopen.addEventListener('click', function(event){
brstwindow.show()
})

//Recieve file path from main and append to div
ipcRenderer.on('brstfiles', function(event){
  console.log('html recieved')
  document.getElementById('brst_files').append('data.filePath')//I know this just appends a string
  console.log('file path recieved')
})

Other renderer

const { ipcRenderer, webContents} = require('electron');
const app = require('electron').remote.app;
const electron = require('electron');
const { get } = require('http');
const BrowserWindow = electron.remote.BrowserWindow;
const path = require('path');
const { on } = require('process');
const {dialog} = require('electron')
const url = require('url');

//Recieved the file path back from main and appending it to div
ipcRenderer.on('brstfiles', function(event){
    console.log('html recieved')
    document.getElementById('brst_files').append('data.filePath')
    console.log('file path recieved')
  })

So my main question is: How can I find DOM elements in a child window from renderer? Should I do everything from the main process?

Extra question: How do I recieve parameters from main process in the renderer process?