as a programmer, please review this code and implement a if statement that will ++ the number of win  of the player. While the bot score works, the player score does not

<?php
 $json_data = file_get_contents("data.json");
 $cards = json_decode($json_data, true);

 // Initialize leaderboard
 $leaderboard = [];
 $playWins = 0;
 $botWins= 0;
?>
<html>
<head>
  <script>
    var used_cards = [];
    var userWins = 0;
    var botWins = 0;
    var ties = 0;

function generateCards() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "data.json", true);
  xhr.onreadystatechange = function() {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      var cards = JSON.parse(this.responseText);      
      if (used_cards.length === cards.length) {
        alert("All the cards have been used. Please reset the game.");
        return;
      }
      
      var rand_keys = [];
      do {
        rand_keys = [Math.floor(Math.random() * cards.length), Math.floor(Math.random() * cards.length)];
      } while (used_cards.includes(rand_keys[0]) || used_cards.includes(rand_keys[1]));
      
      used_cards.push(rand_keys[0], rand_keys[1]);
      
      var card1 = cards[rand_keys[0]];
      var card2 = cards[rand_keys[1]];

      document.getElementById("card1").innerHTML = "Card 1: " + card1['suit'] + " with ranking " + card1['ranking'] + " and image URL " + card1['path'] + "<br>";
      document.getElementById("card2").innerHTML = "Card 2: " + card2['suit'] + " with ranking " + card2['ranking'] + " and image URL " + card2['path'] + "<br>";

      document.getElementById("img1").src = card1['path'];
      document.getElementById("img2").src = card2['path'];

      var ranks = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];

      var random_index_1 = Math.floor(Math.random() * ranks.length);
      var random_index_2 = Math.floor(Math.random() * ranks.length);

      var rank_1 = ranks[random_index_1];
      var rank_2 = ranks[random_index_2];

      if (random_index_1 > random_index_2) {
        document.getElementById("winner").innerHTML = "The Bot has won: " + card1['suit'] + " " + rank_1 + " is higher than " + card2['suit'] + " " + rank_2 + ".";
        botWins++;
        document.getElementById("botWins").innerHTML = "Bot wins: " + botWins;
      } else if (random_index_1 === random_index_2) {
        document.getElementById("winner").innerHTML= "It's a draw: " + card1['suit'] + " " + rank_1 + " is equal to " + card2['suit'] + " " + rank_2 + ".";
} else {
document.getElementById("winner").innerHTML = "The Player has won: " + card1['suit'] + " " + rank_1 + " is lower than " + card2['suit'] + " " + rank_2 + ".";
playerWins++;
document.getElementById("playerWins").innerHTML = "Player wins: " + playerWins;
}
}
};
xhr.send();
}
      </script>
</head>
<body>
  <div>
    <button onclick="generateCards()">Generate Cards</button>
  </div>
  <br><br>
  <div>
    <div id="card1"></div>
    <div id="card2"></div>
    <img id="img1" width="100">
    <img id="img2" width="100">
  </div>
  <br><br>
  <div>
    <div id="user"></div>
    <div id="bot"></div>
  </div>
  <br><br>
  <div id="result"></div>
  <br><br>
  <div>
    <div id="user-wins"></div>
    <div id="bot-wins"></div>
    <div id="ties"></div>
  </div>
</body>
</html>
