Making a button that shows or hides multiple images in a random location

I have a problem when I am making the website for one gallery. I made the code for the button that can show and hide multiple images. I intend to make the button can place several images in randomly. I write the code that can function for only one image.

Please tell me the code that functions as a button to place multiple images in a random location.

• Users can hide images by pressing the button.
• And when users press the button again, it places the images in another random location.

const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const box = document.getElementById("color");

btn.addEventListener("click", () => {
  let randY = Math.floor((Math.random() * height) + 1);
  let randX = Math.floor((Math.random() * width) + 1);
  box.style.top = randY + "px";
  box.style.right = randX + "px";
});


function showhide() {
  var x = document.querySelectorAll("#color");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

body {
  height: 500px;
}

.random {
  position: absolute;
}

<button onclick="showhide()" value="Zeige Features" id="button">click me</button>

<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">

<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">