Show dice element corresponding to random number generated on click

I was trying to make a dice random, and I created different faces of it by using HTML and CSS. Now I cannot hide them. I want to show only one face of the die at a time. How can I call a single face on random numbers from 1 to 6 and in javascript I tried onclicking a button to change the border color. How can I link CSS, HTML and javascript so that on clicking it shows one of the face designed through CSS?

HTML

function roll() {
  var die = Math.floor(Math.random() * 6) + 1;
  $('#die').removeAttr('class').addClass('die' + die);
}

#die {
  width: 30px;
  border: 5px solid black;
  padding: 25px;
  margin: 25px;
}

#die.die1 {
  width: 30px;
  border: 5px solid green;
  padding: 25px;
  margin: 25px;
}

#die.die2 {
  width: 30px;
  border: 5px solid pink;
  padding: 25px;
  margin: 25px;
}

#die.die3 {
  width: 30px;
  border: 5px solid violet;
  padding: 25px;
  margin: 25px;
}

#die.die4 {
  width: 30px;
  border: 5px solid yellow;
  padding: 25px;
  margin: 25px;
}

#die.die5 {
  width: 30px;
  border: 5px solid red;
  padding: 25px;
  margin: 25px;
}

#die.die6 {
  width: 30px;
  border: 5px solid blue;
  padding: 25px;
  margin: 25px;
}

.dice {
  border: solid 3px #aaa;
  border-radius: 3px;
  display: block;
  width: 100px;
  height: 100px;
  margin: 7px auto;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}

.dice .dot {
  border-radius: 50%;
  position: absolute;
  width: 15px;
  height: 15px;
  background: #000;
}

.dice:first-child .dot {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(2) .dot:first-child {
  top: 20px;
  left: 20px;
}

.dice:nth-child(2) .dot:last-child {
  bottom: 20px;
  right: 20px;
}

.dice:nth-child(3) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(3) .dot:nth-child(2) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(3) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(4) .dot:nth-child(3) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(4) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(5) .dot:nth-child(3) {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.dice:nth-child(5) .dot:nth-child(4) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(5) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:first-child {
  top: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:nth-child(2) {
  top: 15px;
  right: 15px;
}

.dice:nth-child(6) .dot:nth-child(3) {
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(4) {
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
}

.dice:nth-child(6) .dot:nth-child(5) {
  bottom: 15px;
  left: 15px;
}

.dice:nth-child(6) .dot:last-child {
  bottom: 15px;
  right: 15px;
}

.content {
  left: 80%;
}

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="dice.css" type="text/css" />
  <script src="dice.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <div id="die">
  </div>
  <button type="button" onclick="roll()">Click me!</button>
  <div class="container">
    <div class="dice">
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
</body>

</html>

Solution

Rather than hiding, showing, and repositioning the dice elements you have created, you could just create the element you need on click (with some css modifications to take advantage of the random number generation to help position the dots). As an aside, there is no real need for jQuery here, but it is used in the example since you were using it in your original approach.

The js creates a click event listener on the #roll button. Each time the button is clicked, the num variable is set to a random number between 1 and 6. The cls variable sets the prefix for the various classes that determine the positioning of the dots on the die - it assumes the roll is an odd number and then adjusts if it is even. Then, we remove any child elements from #die with empty() (so any dots from a previous roll are removed before we add new ones). Finally, we use a loop to append the same number of dots to #die as generated in our num variable. At the same time, we append the numbered class for each dot (which is why we named our classes odd-1, even-1, etc). For example:

$('#roll').click(() => {
  const num = Math.floor(Math.random() * 6) + 1;
  let cls = 'odd-'
  if (num % 2 === 0) {
    cls = 'even-'
  }
  
  $('#die').empty();
  for (let i = 1; i <= num; i++) {
    $('#die').append(`<div class="dot ${cls}${i}"></div>`);
  }
});

.dice {
  position: relative;
  margin: 8px;
  border: solid 3px #aaa;
  border-radius: 3px;
  width: 100px;
  height: 100px;
}

.dice .dot {
  position: absolute;
  background: #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-8px, -8px);
}

.odd-1 {
  top: 50%;
  left: 50%;
}

.even-1,
.odd-2 {
  top: 25%;
  left: 25%;
}

.even-2,
.odd-3 {
  top: 75%;
  left: 75%;
}

.even-3,
.odd-4 {
  top: 75%;
  left: 25%;
}

.even-4,
.odd-5 {
  top: 25%;
  left: 75%;
}

.even-5 {
  top: 50%;
  left: 75%;
}

.even-6 {
  top: 50%;
  left: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="roll" type="button">Click to roll</button>
  <div id="die" class="dice">
  </div>
</div>