My DragTarget only receives the image that is listed first. How do I change this?

Both Images are intended to be dragged into the leftbox div. when you drag the blue image, which is listed above the orange image. It successfully drops into the leftbox. When you drag the orange image to the droptarget the blue image replaces it once dropped. This is because it is listed above the orange image. I tested this out by swapping the code orders. Putting the orange image first. And the orange image was then the only recipient of the dropping. Any help is appreciated.

function allowdrag(e) {
  e.preventDefault();
}

function Drop(e) {
  e.preventDefault();
  var texts = e.dataTransfer.getData('image/png')
  var data = document.getElementById(texts);
  e.target.appendChild(data)
}

function drog(e) {
  e.dataTransfer.setData('image/png', e.target.id)
}

#leftbox {
  width: 20%;
  height: 175px;
  border: 5px solid grey;
  border-radius: 0px;
  padding: 0px;
  margin: 75px 15px 0px 100px;
  display: inline-block;
  background-color: white;
  position: relative;
}

#image1 {
  height: 175px;
  width: 138px;
  display: table;
  margin-bottom: 75px;
  display: inline-block
}

#reset {
  height: 0;
  width: 21%;
  padding-bottom: 18%;
  position: absolute;
  right: 0px;
  background-image: url(https://win-conditions.com/wp-content/uploads/2021/12/download-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

<div id="leftbox" ondrop="Drop(event)" ondragover="allowdrag(event)">
  <button id="reset" type="button"></button>
</div>

<div id="image">
  <img id="image1" src="https://win-conditions.com/wp-content/uploads/2021/11/electrospirit.png" draggable="true" ondragstart="drog(event)">
  <img id="image1" src="https://win-conditions.com/wp-content/uploads/2021/11/fire_spirits-1.png" draggable="true" ondragstart="drog(event)">
</div>

JSFiddle: https://jsfiddle.net/0h7c45kj/1/