JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

  <head>
    <title>Picture Game</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device.width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body>
    <h1>Picture Game</h1>
    <br/>
    <div class="rules">
      <p id="Rules Title">Rules Of The Game</p>
      <p>You need to look at the picture and then</br>
        click on the answer below you think describes</br>
        that picture. Have fun!</p>
      </br>
    </div>
    <div="img">
      <img class="image" id="" src="" alt=""></br>
      </div>
      <div class="mixed">
        <div class="div1">
          <button class="answer" data-but="a" id="">a</button>
        </div>
        <div class="div2">
          <button class="answer" data-but="b" id="">b</button>
        </div>
        <div class="div3">
          <button class="answer" data-but="c" id="">c</button>
        </div>
      </div>

      <script type="text/javascript" src="js/main.js"></script>
  </body>

</html>

JavaScript

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

var score = 0;
//localStorage.setItem("score", score);
var rounds;
var arr = ["0", "1", "2", "3", "4"];
arr = shuffle(arr);
console.log(arr);

var buttonValues = new Array("The letter A", "The letter B", "The letter C",
  "The letter D", "The letter E");
var randomImages = new Array("images/A.png", "images/B.png", "images/C.png",
  "images/D.png", "images/E.png");

$('.image').each(function() {
  img1 = $(this);
  img1.attr('src', randomImages[arr[0]]);
  img1.attr('id', arr[0]);
  //alert( $(this).attr('id') );
});

$('[data-but="a"]').each(function() {
  var $button = $(this);
  $button.text(buttonValues[arr[0]]);
  $button.attr('id', arr[0]);
});

$('[data-but="b"]').each(function() {
  var $button = $(this);
  $button.text(buttonValues[arr[1]]);
  $button.attr('id', arr[1]);
});

$('[data-but="c"]').each(function() {
  var $button = $(this);
  $button.text(buttonValues[arr[2]]);
  $button.attr('id', arr[2]);
});

var ans;
var img;
img = document.getElementsByClassName("image")[0].id;
$(".answer").click(function() {
  ans = $(this).attr('id');
  if (ans === img) {
    //score++;
    //score = localStorage.getItem("score", score);
    score++;
    //localStorage.setItem("score", score);
    //rounds++;
    alert('right answer');
    location.reload();
  } else {
    //score = 0;
    //rounds++;
    alert('wrong answer');
    //location.reload();
  }
});
//var res = localStorage.getItem("score", score)
//console.log(res);

$(function() {
  var parent = $(".mixed");
  var divs =...