Swap BG gradient images in a gallery of swatches

Question

I am finishing a function to edit swatches in a grid,and am at the point where small image needs to be swapped with the main image to edit/alter if required, the current code gets the individual image, but not swap it with the main image. I have used .src, but this doesn't seem to be right for a gradient background image, should I use backgroundImage?. Code is below, and works until the swap, which doesnt. The mainID id is the large div at the top of the page "bodybg", where the swatch was created, and is supposed to go back there to edit.

editSwatch(){
let el = document.querySelectorAll('.swatch');
for(let i=0; i < el.length; i++) {
el[i].addEventListener('click', function () {
  el[i].setAttribute('id', 'gradient');      //id only on clicked swatch
  let mainID = document.getElementById('bodybg');
  let smallID = document.getElementById('gradient');
  // eslint-disable-next-line no-unused-vars
  let mainSRC = mainID.src;
  let smallSRC = smallID.src;
    mainSRC = smallSRC;        //doesnt work
    console.log('Clicked');    //works

  });
  }
}

So in short,a bg image swap, but with gradients not images? Any tips welcome

Demo: Demo Here

Thanks