I'm writing a basic memory game where you flip 2 cards and if they don't match, they flip back over, but if they do match their background color changes. All of the flipping is done on click; it adds a class of flipped. Right now nothing happens when a match is made; the cards just stay there keeping the flipped class. How can I make it so the bg color changes on a match?

Also, I want a button that can reset the game back to all blank cards at any time.
Here's the code:

Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<!-- <link href="style.css" rel="stylesheet"> -->
<style type="text/css">
* {
*** margin: 0;
*** padding: 0;
}
body {
*** font-family: futura;
}
h2 {
*** text-align: center;
}
ul {
*** width: 428px;
*** margin: 0 auto;
*** padding: 0;
}
ul li {
*** float: left;
*** width: 100px;
*** border: 1px solid #444;
*** list-style: none;
*** padding: 70px 0;
*** margin: 0 5px 5px 0;
*** text-align: center;
*** color: #fff;
*** font-weight: bold;
*** border-radius: 1em;
}
ul li:hover {
*** border: 1px solid red;
}
ul li.flipped {
*** color: #444;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>

<h2>Click two different cards to see if they match!</h2>
<ul>
*** <li>salmon</li>
*** <li>swordfish</li>
*** <li>swordfish</li>
*** <li>shrimp</li>
*** <li>lobster</li>
*** <li>scallops</li>
*** <li>lobster</li>
*** <li>salmon</li>
*** <li>tuna</li>
*** <li>scallops</li>
*** <li>tuna</li>
*** <li>shrimp</li>
</ul>

<button type="reset" name="reset" value="reset">
<script type="text/javascript">

$(function() {
*** var firstCard = null;

*** $('li').on('click', function(e) {
******* e.preventDefault();

******* $(this).addClass('flipped');

******* if (firstCard === null) {
*********** firstCard = $(this);
******* } else {
*********** if (firstCard.text() === $(this).text()) {
*************** firstCard = null;
*********** } else {
*************** var secondCard = this;

*************** setTimeout(function() {
******************* firstCard.removeClass('flipped');
******************* $(secondCard).removeClass('flipped');

******************* firstCard = null;
*************** }, 1000);
*********** }
******* }
*** });
});
</script>
</body>
</html>