Randomly show max 3 blocks per page – Blancer.com Tutorials and projects

I have several blocks in the form of circles.

I made it so that when you click on the block, it dissolves. But if you dissolve all the blocks, the page will remain empty.

How can I make it so that there are a maximum of 3 blocks on the page, which are selected randomly? Also, the page is never blank.

To select 3 random I use

var randomnumber = Math.floor(Math.random()*10) + 1;
var circle1 = $('#circle' + randomnumber);
var circle2 = $('#circle' + randomnumber);
var circle3 = $('#circle' + randomnumber);

But I can’t hide everything and still show 3 selected ones. In addition, when we clicked on one of them and it disappeared, a new one should appear in its place

I tried to style all blocks visibility: hidden; and in the script like this var circle1 = $('#circle' + randomnumber).css('visibility', 'visible'); but in the end nothing comes up.

$("div").click(function() {
  $(this).fadeOut("slow");
});

const nodes = document.querySelectorAll('.animation');
for(let i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', (event) => {
    event.target.style.animation = 'Animation 200ms linear';
    setTimeout(() => {
      event.target.style.animation = '';
    }, 220);  });
}

.circle1 {
  background: #456BD9;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle2 {
  background: #fb6df9;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle3 {
  background: #6de2fb;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle4 {
  background: #81fb6d;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle5 {
  background: #e9fb6d;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle6 {
  background: #6bfc90;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle7 {
  background: #a5950a;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle8 {
  background: #a50a74;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle9 {
  background: #ff0c00;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle10 {
  background: #06aec2;
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="circle1 animation"></div>
<div class="circle2 animation"></div>
<div class="circle3 animation"></div>
<div class="circle4 animation"></div>
<div class="circle5 animation"></div>
<div class="circle6 animation"></div>
<div class="circle7 animation"></div>
<div class="circle8 animation"></div>
<div class="circle9 animation"></div>
<div class="circle10 animation"></div>