Memo game

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>memory game</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <style type="text/css">

        .row{
            float:left;
            clear:both;
            width:500px;
        }

        .row div{
            margin:5px;
            background: linear-gradient(#1E5799, #7db9e8);
            border:solid black 2px;
            height:75px;
            width:75px;
            padding:10px;
            float: left;
            text-align:center;
            color: #ffffff;
            font-size: 18px;
        }

        .onhover{
            cursor:pointer !important;
            background: linear-gradient(#beee47, #80af12) !important;
            color:royalblue !important;
        }

        .row div span{
            display:none;
        }

        .row div h2{

        }
        .red{

            border:solid 2px red !important;
        }
        .opened {
            background: gray !important;
            color: #FFF !important;
        }

    </style>

    <script type="text/javascript">
    var lastSelected;
    var score = 0;
    var num = 0;
    $(document).ready(function(){
        for(var i = 0; i <= 16; ++i)
            if(i % 2 == 0)
                $("#" + i).addClass("red");
        $(".row div").hover(function(){
            $(this).addClass("onhover");
        }, function() {
            $(this).removeClass("onhover");
        });
        $(".row div").click(function() {
            num++;
            var val = $.trim($(this).find("span").text());
            $(this).find("span").toggle();
            $(this).find("h2").toggle();
            if(num == 2) {
                num = 0;
                if($.trim($(lastSelected).find("span").text()) == val) {
                    score++;
                    $(lastSelected).addClass("opened");
                    $(this).addClass("opened");
                    $(this).off();
                    $(lastSelected).off();
                } else {
                    $(lastSelected).find("span").toggle();
                    $(lastSelected).find("h2").toggle();
                    $(this).find("span").toggle();
                    $(this).find("h2").toggle();
                }
            }
            lastSelected = $(this);
            var count = 0;
            for(var i = 0; i <= 16; ++i) {
                if($("#" + i).hasClass("opened")) {
                    count++;
                }
            }
            if(count == 16)
                alert("Game finished!\nTotal score: " + score);
        });
    });
    </script>

</head>
<body>

<div class="row">
    <div id="1">
        <span>
            Carl Cox
        </span>
        <h2>1</h2>
    </div>
    <div id="2">
        <span>
            Cow
        </span>
        <h2>2</h2>
    </div>

    <div id="3">
        <span>
            Pig
        </span>
        <h2>3</h2>
    </div>

    <div id="4">
        <span>
            Pig
        </span>
        <h2>4</h2>
    </div>
</div>

<div class="row">
    <div id="5">
        <span>
            Bat
        </span>
        <h2>5</h2>
    </div>

    <div id="6">
        <span>
            Dog
        </span>
        <h2>6</h2>
    </div>

    <div id="7">
        <span>
            Lama
        </span>
        <h2>7</h2>
    </div>

    <div id="8">
        <span>
            Snake
        </span>
        <h2>8</h2>
    </div>
</div>

<div class="row">
    <div id="9">
        <span>
            Cat
        </span>
        <h2>9</h2>
    </div>

    <div id="10">
        <span>
            Snake
        </span>
        <h2>10</h2>
    </div>

    <div id="11">
        <span>
            Dog
        </span>
        <h2>11</h2>
    </div>

    <div id="12">
        <span>
            Bat
        </span>
        <h2>12</h2>
    </div>
</div>

<div class="row">
    <div id="13">
        <span>
            Lama
        </span>
        <h2>13</h2>
    </div>

    <div id="14">
        <span>
            Cow
        </span>
        <h2>14</h2>
    </div>

    <div id="15">
        <span>
            Carl Cox
        </span>
        <h2>15</h2>
    </div>

    <div id="16">
        <span>
            Cat
        </span>
        <h2>16</h2>
    </div>
</div>
</body>
</html>