whenever an image starts to get deleted onclick it wont stop

Issue

I made this button, and added Math.floor(Math.random() * 2 + 1) to it to give wrong and correct randomly. and i added 5 images as lifes that whenever I get wrong one of the images will get hidden or removed. but I'm getting 2 problems: the first one is that whenever an image gets deleted it wont stop and it deletes all the other images without returning to the math.random. second problem is that when i get wrong answer it takes to clicks to start deleting the images. I've been trying to fix it but I just couldn't figure it out! you can run the code yourself and try it if you didnt understand what i ment! if you do help, pleas explain to me what was the problem!!

var button1 = 1;
var span1 = document.getElementById("count1");
var span2 = document.getElementById("count2");

document.getElementById("button1").onclick = function() {
  let btn1 = Math.floor(Math.random() * 2 + 1);
  if (btn1 == 1) {
    if (parseInt(span1.innerHTML) < 10)
      span1.innerHTML = parseInt(span1.innerHTML) + 1;

  } else if (parseInt(span2.innerHTML) < 5) {

    let imageToDelete = 1;

    document.getElementById("button1").onclick = function() {
      document.getElementById("image_" + imageToDelete).style.visibility = "hidden";
      imageToDelete++;

      span2.innerHTML = parseInt(span2.innerHTML) + 1;
    }
  }
}

<input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>

<div id="output">
  <img id="image_1" src="/images/person1.jpg">
  <img id="image_2" src="/images/person1.jpg">
  <img id="image_3" src="/images/person1.jpg">
  <img id="image_4" src="/images/person1.jpg">
  <img id="image_5" src="/images/person1.jpg">

</div>

<p id="p1">CORRECT: <span id="count1">0</span></p>
<p id="p2">ERROR: <span id="count2">0</span></p>

Solution

Something like this maybe?

//var button1 = 1;
var span1 = document.getElementById("count1");
var span2 = document.getElementById("count2");
var lives = document.getElementsByClassName("img");
var deads = 0;
document.getElementById("button1").onclick = function() {
  if (deads >= 5) {
    alert('no more lives');
    return;
  }
  var rand = Math.random();
  var sp1 = parseInt(span1.innerHTML);
  var sp2 = parseInt(span2.innerHTML);
  if (rand < .5 && sp1 < 10) {
    if (deads > 0) deads--;
    sp1++;
    span1.innerHTML = sp1;
    lives[deads].style.visibility = 'visible';
  } else {
    sp2++;
    span2.innerHTML = sp2;
    lives[deads].style.visibility = 'hidden';
    deads++;
  }
}

<input id="button1" type="button" value="click me?" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>

<div id="output">
  <img id="image_1" class='img' src="/images/person1.jpg">
  <img id="image_2" class='img' src="/images/person1.jpg">
  <img id="image_3" class='img' src="/images/person1.jpg">
  <img id="image_4" class='img' src="/images/person1.jpg">
  <img id="image_5" class='img' src="/images/person1.jpg">

</div>

<p id="p1">CORRECT: <span id="count1">0</span></p>
<p id="p2">ERROR: <span id="count2">0</span></p>

Answered By - Abelucho