I am trying to concatenate several divs to take a screenshot of my screen with html2canvas. The library works correctly if I use just a div as target with html2canvas but once I try to concatenate several divs the way I coded it, the image is with the last added div. The DOM is altered and everything is moving down.

Is it the right way to create concatenate divs for html2canvas ?

How can I get the expected results ? ty

var screenshot = document.getElementById("screenshotButton");

screenshot.addEventListener("click", function(event) {
  const captureElement = document.getElementById('cy')
  const testDiv = document.getElementById('tippy-2')

  var alpha = document.createElement("div");
  alpha.appendChild(captureElement);
  alpha.appendChild(testDiv);
  // document.body.appendChild(alpha);


  html2canvas(alpha)
  .then(canvas => {
    crossOriginIsolated = 'anonymous',
    useCORS= true,
    foreignObjectRendering= true,
    allowTaint =false,
    canvas.style.display = 'none'
    document.body.appendChild(canvas)
    return canvas
  })
  .then(canvas => {
    const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
    const a = document.createElement('a')
    a.setAttribute('download', 'my-image.png')
    a.setAttribute('href', image)
    a.click()
    canvas.remove()
  })