Magazine | May - Sudoku

HTML

<div style="position: relative; width: 688px; height: 500px; background: url('https://i.imgur.com/GkPNKVK.jpg'); background-position: center center; background-repeat: no-repeat;">
    <div id="sudokubokkusu" style="background: url('https://i.imgur.com/K3muUqw.png'); overflow: visible; position: relative; width: 324px; height: 324px; top: 62px; left: 25px; margin-right: -324px; margin-bottom: -324px; font-size: 0; text-align: center;">
    
        <!-- section 1 row 1 -->
        <div class="colorselection unselectable" style="margin: 3px 0 0 0px; ">7</div>
        <div class="colorselection unselectable">5</div>
        <div class="colorselection bgColour">&nbsp;</div>
        <div class="colorselection" style="margin-left: 3px;">&nbsp;</div>
        <div class="colorselection unselectable">1</div>
        <div class="colorselection unselectable">3</div>
        <div class="colorselection unselectable" style="margin-left: 3px;">9</div>
        <div class="colorselection bgColour">&nbsp;</div>
        <div class="colorselection unselectable">2</div>
        <br>
        <!-- section 1 row 2 -->
        <div class="colorselection unselectable" style="margin: 1px 0 0 0px;">1</div>
        <div class="colorselection">&nbsp;</div>
        <div class="colorselection unselectable">8</div>
        <div class="colorselection bgColour" style="margin-left: 3px;">&nbsp;</div>
        <div class="colorselection unselectable">6</div>
        <div class="colorselection unselectable">5</div>
        <div class="colorselection" style="margin-left: 3px;">&nbsp;</div>
        <div class="colorselection unselectable">3</div>
        <div class="colorselection unselectable">4</div>
        <br>
        <!-- section 1 row 3 -->
        <div class="colorselection unselectable" style="margin: 1px 0 0 0px;">9</div>
        <div class="colorselection unselectable">4</div>
        <div class="colorselection unselectable">3</div>
        <div class="colorselection unselectable"...

CSS

* {
	font-family: 'Arial', sans-serif;
}

.colorselection {
	font-size: 20px;
	line-height: 34px;
	cursor: pointer;
	width: 34px;
	height: 34px;
	display: inline-block;
	margin: 1px 0 0 1px;
}

.colorselection.activeBox {
	outline: 5px solid #000;
	position: relative;
}

.color_blob {
	width: 64px;
	height: 64px;
	display: inline-block;
	margin: 5px;
	font-size: 32px;
	line-height: 64px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	border: 2px solid #000;
	cursor: pointer;
	background: #fff;
}

.colorselection.unselectable{
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	cursor: auto;
}

.bgColour {
	background: #e8ad72;
}

JavaScript

$( ".colorselection" ).click( function() {
    if ( $( this ).hasClass("unselectable") ) {
    
    } else {
        $( ".colorselection" ).removeClass( "activeBox" );
        $( this ).addClass( "activeBox" );
    }
});
    
$( ".color_blob" ).click( function() {
    var selected_box = $( ".colorselection.activeBox" );
    var texty = $( this ).text();
    $( selected_box ).text( texty );
});
    
$( document ).ready( function() {
    $( "#buttonbutton" ).click( function() {
        if ( $( "#movienight" ).val() == ( "698911861" ) ) {
            $( ".wordSearchPrizeContainer" ).css({
				'pointer-events' : 'auto',
				'opacity' : '1'
			});
            $( "#Answer_Box_R1" ).show();
        } else {
            window.alert( "Try again!" );
        }
    });
    $( '#movienight' ).keypress( function( event ) {
        if ( event.keyCode == 13 ) {
            $( '#buttonbutton' ).click()
        }
    })
});