JSFiddle - React, Tailwind, and code Playground
HTML
<div id="players">
<div class="score">Player 1 : <span id="player1">0</span> </div>
<div class="score" style="float: right;">Player 2 : <span id="player2">0</span> </div>
</div>
<input id="check" type="submit" value="check" />
CSS
#players
{display:block;
margin:50px 10px;}
.score
{display: inline-block;}
#check
{display: block;
margin: 10px;}
JavaScript
//create a player object
function player(name,state,score) {
this.name = name;
this.state = state;
this.score = score;
}
var score = [0,0];
var localCorrect = 2;
var players = [
new player('player1',true,0),
new player('player2',false,0)
];
var i=0;
var num_players = players.length;
$(document).ready(function(){
$("#check").click(function(){
if(localCorrect === 2){
//counting number of correct cards and assigning it to the player
if (players[i].state){
var localscore = players[i].score;
localscore++;
score[i] = localscore;
players[i].score = score[i];
//display the score
$("span#"+players[i].name).html(score[i]);
players[i].state = false;
i = (i+1) % num_players;
players[i].state = true;
}else{
}
}
});
});