Adding event listener to a button to change a section's background picture

Hi, I currently have a side where I am having the user edit/configure their own home. I want for a button to display which specific model they are picking, and according to what model is picked, I want to change the background picture of the section on the left side. It currently has a white background png. I tagged the current page that I am working on. 

I tried some JS, but not sure if I am missing something?

Here is what I have. The current url is the picture which I want to upload.

document.addEventListener("DOMContentLoaded", function() {
  var button = document.querySelector('#block-yui_3_17_2_1_1715720969210_49358');
  button.onclick = function() {
    var section = document.querySelector('section[data-section-id="6642cac4e9abab7cc0dd30e9"]');
    section.style.backgroundImage = 'url("https://images.squarespace-cdn.com/content/5e4b3cfd445a6a5feb18f718/280d80b6-32e3-4028-aeda-4c4fa9eb5527/Samara+sample.png?content-type=image%2Fpng")';
  };
});


Website page link:
https://www.luctorcompany.com/design-your-home

Hi Alek, You your idea seems great but any of the buttons, colors and setting don't work. How would like work that? I think there are lot of thing to be work on and you will need a developer who may built that for you. I am not sure, your script will work here. Because there are lot more custom code need to be written. 

I am a developer. I am simply just trying to access the background element in the dom tree. Is this not possible using squarespace? Would I have to build the website from scratch?

This is some inspo on how I want the website to react.
 

https://www.abodu.com/configurator?model=Abodu Studio