JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

img
{
    width:50px;
}
#start
{
    width: 500px;
    padding: 10px 40px;
}
#numbers
{
	border-top: 1px groove black;
    width: 500px;
    margin: 30px 40px;
	clear: both;
}
#problem
{
    width: 500px;
    margin: 20px 40px;
	clear: both;
}
#numbers img
{
    position:relative;
    cursor: pointer;
    margin: 20px 10px;
    padding: 10px;
    float: left;
    height: 70px;
}
#numbers img:hover
{
    height: 80px;
	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 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, arrNumbers);
		
		$(".draggable").draggable();
	});   
	$('#reset').click(function(){
		reset();
		makeNumPad(imageFolder, arrNumbers);
	});
    var...