i am newbie in JavaScript and was experimenting with a simple memory game.

I have written a code but i am facing one issue in the starting of the game. Whenever I try to start the game by pressing a cal button, even if i choose the right pair it is still displaying divs are not same. But after the first round its working properly. I guess, there is some error in the logic. It would be great if u help me out.

Thanks in advance

border: 1px solid black;
height: 670px;
width: 828px;
border: 1px solid black;
float: left;
height: 154px;
margin: 5px;
width: 125px;

border: 1px solid red;
float: left;
height: 154px;
margin: 5px;
width: 125px;

<script src="jquery-1.6.1.min.js"></script>
$(document).ready(function() {
var b;
var x=0;


var c=this.innerHTML



alert("div are same");
alert("div are not same");



var a=this.id;
b =this.innerHTML;



function init(){
var randomArr = [], trackingArr = [],
targetCount = 12, currentCount = 0,
min = 1, max = 12,

while (currentCount < targetCount) {
rnd = Math.floor(Math.random() * (max - min + 1)) + min;
if (!trackingArr[rnd]) {
trackingArr[rnd] = rnd;
randomArr[currentCount] = rnd;
currentCount += 1;
var randomArr2 = [], trackingArr2 = [],
targetCount2 = 24, currentCount2 = 0,
min2 = 1, max2 = 24,
while (currentCount2 < targetCount2) {
rnd2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
if (!trackingArr2[rnd2]) {
trackingArr2[rnd2] = rnd2;
randomArr2[currentCount2] = rnd2;
currentCount2 += 1;




<button onClick="init();">CAL</button>
<div id="Playfield">
<div id="1" class="card down one" data-face="1" ></div>
<div id="2" class="card down two" data-face="2"></div>
<div id="3" class="card down three" data-face="3"></div>
<div id="4" class="card down four" data-face="4"></div>
<div id="5" class="card down five" data-face="5"></div>
<div id="6" class="card down six" data-face="6"></div>
<div id="7" class="card down seven" data-face="7"></div>
<div id="8" class="card down eight" data-face="8"></div>
<div id="9" class="card down nine" data-face="9"></div>
<div id="10" class="card down ten" data-face="10"></div>
<div id="11" class="card down eleven" data-face="11"></div>
<div id="12" class="card down twelve" data-face="12"></div>
<div id="13" class="card down one" data-face="1"></div>
<div id="14" class="card down two" data-face="2"></div>
<div id="15" class="card down three" data-face="3"></div>
<div id="16" class="card down four" data-face="4"></div>
<div id="17" class="card down five" data-face="5"></div>
<div id="18" class="card down six" data-face="6"></div>
<div id="19" class="card down seven" data-face="7"></div>
<div id="20" class="card down eight" data-face="8"></div>
<div id="21" class="card down nine" data-face="9"></div>
<div id="22" class="card down ten" data-face="10"></div>``
<div id="23" class="card down eleven" data-face="11"></div>
<div id="24" class="card down twelve" data-face="12"></div>