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
code

<html>
<head>
<style>
#Playfield{
border: 1px solid black;
height: 670px;
width: 828px;
}
.card{
border: 1px solid black;
float: left;
height: 154px;
margin: 5px;
width: 125px;


}
.own{
border: 1px solid red;
float: left;
height: 154px;
margin: 5px;
width: 125px;
background-color:blue;
}

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

if(x<=2){

var c=this.innerHTML

$(this).toggleClass('own');

if(x==2){

if(c==b)
alert("div are same");
else
alert("div are not same");
}

}else{

$('.card').removeClass('own');
$(this).toggleClass('own');
x=1;

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

}


});
});

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



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,
rnd2;
while (currentCount2 < targetCount2) {
rnd2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
if (!trackingArr2[rnd2]) {
trackingArr2[rnd2] = rnd2;
randomArr2[currentCount2] = rnd2;
currentCount2 += 1;
}

}
for(i=0,j=0;i<12,j<12;i++,j++){
document.getElementById(randomArr2[i]).innerHTML=randomArr[j];

}
for(i=12,j=0;i<24,j<12;i++,j++){
document.getElementById(randomArr2[i]).innerHTML=randomArr[j];

}

}
</script>
</head>
<body>
<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>
</div>

</body>
</html>