Couldn't change the text between a Html element using JQuery - html

Question

I have the JQuery code below. I changed the text between a button element from + to x in second if statement. Now, when the button is displaying x, I wanted to change the text to + in first if statement using $(this).text("+");, yet the button is displaying x even after the change. I have checked if the text was changed to + using console.log() and it says it has changed to +. But, why isn't the result showing its effect on the button?
let players = [];
let remainingPlayers = 11;
$(".card > button").click(function(e) {
let removePlayer = "";
let index = -1;
if ($(this).text() !== "+") {
removePlayer = $(this).attr("value");
index = players.indexOf(removePlayer);
if (index != -1) {
$(this).text("+");
players.splice(index, 1);
console.log(players);
console.log($(this).text());
}
}
if (remainingPlayers != 0) {
remainingPlayers -= 1;
players.push($(this).attr("value"));
$(this).text("x");
$(this).addClass("btn btn-danger button-select-players");
$("#pl-remain").text(remainingPlayers);
} else {
alert("You can't select more players");
console.log(players);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="card" style="width: 15rem;">
<img src="..." class="card-img-top" alt="...">
<button class="btn btn-success button-select-players" type="button" name="button" value="xyz">+</button>
<ul class="list-group list-group-flush">
<li class="first-li list-group-item">Name</li>
<li class="list-group-item">0</li>
</ul>
</div>
</div>