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
var score = [0,0];
var localCorrect = 2;
$(document).ready(function(){
//create a player object
var Player = function(name, state, score) {
this.name = name;
this.state = state;
this.score = score;
}
var players = [
new Player('player1',true,0),
new Player('player2',false,0)
];
$("#check").click(function(){
if(localCorrect == 2) {
// iterate through all the players
for(var iterator = 0; iterator < players.length; iterator++) {
// check if there is array/object element with this key
if (players.hasOwnProperty(iterator)) {
var player = players[iterator];
// check for player state
if (player.state === true) {
// increment player score
player.score++;
score[iterator] = player.score;
$("span#" + player.name).html(score[iterator]);
player.state = false;
// check if there is next player in the array
// if not start from the first player
if (players.hasOwnProperty(iterator + 1)) {
var nextPlayer = players[iterator + 1];
nextPlayer.state = true;
} else {
var firstPlayer = players[0];
firstPlayer.state = true;
}
// exit the for loop
break;
} else {
// some other thing
}
}
}
}
});
});