Display 3 random elements by id with no repeat using JQuery. How to make sure it always returns 3? And redo the function clicking the same button?

Question

I have a code to randomly display three elements by id without repeat that usually works. The current code displays three playing cards selected from 54 cards/html elements. At the moment it works properly most of the time, but sometimes it only returns two cards and much more rarely only one.I would like to improve it by always returning three. How would I modify the below code to do so?

Also, if I press the button that randomly displays three elements/cards twice or more, it keeps adding three cards with each subsequent click until the very many display and cards are exhausted. How would I modify the below code so that it would redo the function (randomly display another set of three cards in its place and hide the initial three from the first click).

I would like to keep the current code's functionality of selecting elements by id because it could be used to generate other multiple elements than playing cards.

CSS is set to:

.cards {
    display: none;
}  

And the code is:

var myarray = [
"#card1","#card2","#card3","#card4","#card5","#card6","#card7"...];
var numberOfCards = 3;

function getRandom() {
    for (var i = 1; i <= numberOfCards; i++) {
    var randomIndex = RandomDiv();
    $('.cards:eq('+randomIndex+')').fadeIn(900).css('display', 'inline-block');
    myarray.splice(randomIndex, 1);
 }
}
$('.btn').on('click', function() {
    getRandom();
});

function RandomDiv() {
    return Math.floor(Math.random() * myarray.length);
};

Thank you!

Answer 1

Here is a solution without a complete overhaul:

var myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
"#card7","#card8","#card9","#card10","#card11","#card12"];
var numberOfCards = 3;
$(".card").hide();

var previous = [];

function getRandom() {

   if(myarray.length<3){
       myarray = ["#card1","#card2","#card3","#card4","#card5","#card6",
              "#card7","#card8","#card9","#card10","#card11","#card12"];
   }
   
   for (var i = 1; i <= numberOfCards; i++) {
       var randomIndex = RandomDiv();
       previous.push(myarray[randomIndex]);
       $(myarray[randomIndex]).fadeIn(900);
       myarray.splice(randomIndex, 1);
   }
};

$('.btn').on('click', function() {
   for(k=0; k< numberOfCards; k++){
	$(previous[k]).hide(0);
   }
   previous = [];
   getRandom();
});

function RandomDiv() {
    return Math.floor(Math.random() * myarray.length);
};

.card{
  display: inline-block;
}

.btn{
  border: 1px solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
Deal
</div>
<div class="card" id ="card1" >1</div>
<div class="card" id ="card2" >2</div>
<div class="card" id ="card3" >3</div>
<div class="card" id ="card4" >4</div>
<div class="card" id ="card5" >5</div>
<div class="card" id ="card6" >6</div>
<div class="card" id ="card7" >7</div>
<div class="card" id ="card8" >8</div>
<div class="card" id ="card9" >9</div>
<div class="card" id ="card10" >10</div>
<div class="card" id ="card11" >11</div>
<div class="card" id ="card12" >12</div>

All cards are initially hidden at the start so only fadeIn(900) is needed.

Remember that the array myarray is getting shorter in every deal, so you should return dealt cards to it when it runs out. This is now done inside the getRandom function.

Here is a jsfiddle