JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:550px; margin: 0 auto;">
    <div id="start">
        <button type="button" id="getProblem">Get Problem</button>
        <button type="button" id="reset">Reset</button>	<span id="score"></span>

    </div>
    <div id="problem">
        <div id="dividend"></div>
        <div id="operator">
            <img src="http://www.7generationgames.com/magnets/divide.png" />
        </div>
        <div id="divider"></div>
        <div id="equal">
            <img src="http://www.7generationgames.com/magnets/equal.png">
        </div>
        <div id="result"></div>
    </div>
    <div id="numbers"></div>
</div>
<audio id="soundHandle" style="display: none;"></audio>

CSS

img {
    width:50px;
}
#start {
    width: 500px;
    padding: 10px 40px;
}
#numbers {
    border-top: 1px groove black;
    width: 530px;
    margin: 30px 40px 0 40px;
    clear: both;
}
#problem {
    width: 500px;
    margin: 40px 40px;
    clear: both;
}
#numbers img {
    position:relative;
    cursor: pointer;
    margin: 20px 10px;
    padding: 10px;
    float: left;
    height: 70px;
}
#numbers img:hover {
    height: 80px;
    margin-top: 10px;
    width: 60px;
    /* shadow ---- Not enabled
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    */
}
#problem img {
    position:relative;
    cursor: pointer;
    margin: 20px 0px;
    padding: 10px;
    float: left;
    height: 70px;
}
#problem div {
    position: relative;
    width=70px;
    padding: 10px 0px;
    float: left;
}
#result {
    border: 1px solid black;
    width: 100px;
    min-height: 90px;
    margin: 20px 0 0 0;
}
#score {
    border: 1px solid black;
    padding: 5px;
    font: 1.6em normal"verdana";
}

JavaScript

// Generate random number
function randnum(min,max) {
var num=Math.round(Math.random()*(max-min))+min;
return num;
} 

// Generate numeric keypad
function makeNumPad(imageFolder, arrNumbers)
{
    for (var i = 0 ; i < 10 ; i++)
    {
        $('#numbers').append("<img class='draggable' id='" +
                             i.toString() + "' src='"+
                             imageFolder + 
                             arrNumbers[i]+
                             ".png' />");
    }
}
var rightAnswer ;
var yourAnswer ;
function getProb(imageFolder, arrNumbers)
{ 
	// Get the new problem
    var divider = randnum(1,9);
    rightAnswer = randnum(1,9);
    var dividend = divider * rightAnswer; // no need for temp
    dividend = dividend.toString(); 
    digit1 = dividend.substring(0, 1);
    $("#dividend").append("<img src='" + 
                          imageFolder +
                          arrNumbers[+digit1] + 
                          ".png' />");
	digit2 = dividend.substring(1, 2);
    if (digit2) 
    {
        $("#dividend").append("<img src='" + 
                              imageFolder +
                              arrNumbers[+digit2] + 
                              ".png' />");
    }
    $("#divider").append("<img src='" + 
                          imageFolder +
                          arrNumbers[divider] + 
                          ".png' />");
} 
function reset()
{
	// clear previous numbers and reset everything
		$("#dividend").html("");
		$("#divider").html("");
		$("#numbers").html("");
}

$(function() {
    var soundHandle = document.getElementById('soundHandle');
        soundHandle.src = 'http://www.soundjay.com/button/button-16.mp3';
    
    var imageFolder = "http://www.7generationgames.com/magnets/";
    var arrNumbers = ["zero","one", "two", "three", "four", "five", "six", "seven", "eight", "nine" ];
    
	$('#getProblem').click(function(){
		reset();
		getProb(imageFolder, arrNumbers);
		makeNumPad(imageFolder,...