I have a loop that retrieves different items from the API, each with the same class div for better CSS styling. I am trying to change the background color of each div based on its rarity. However, my current code only makes all divs green. When I add additional else-if statements, it still sets every div to green.
$.each(data.data.daily.entries, function(i, item) {
//Creating item cards
$('body > #cards_daily').append('<div class="card"> ' + item.items[0].name + ' <br> ' + item.finalPrice + '<img src="https://fortnite-api.com/images/vbuck.png" height="20px">' + ' <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>');
//Debug rarity
console.log(item.items[0].rarity.displayValue)
//Trying different values, to match right one
if (item.items[0].rarity.displayValue === "rare") {
$(".card").css("background-color", "red"); //Gray
} else if (item.items[0].rarity.displayValue === "Uncommon") {
$(".card").css("background-color", "#319236"); //Green
} else if (item.items[0].rarity.displayValue === "Rare") {
$(".card").css("background-color", "#4c51f7"); //Blue
} else if (item.items[0].rarity.displayValue === "Epic") {
$(".card").css("background-color", "#9d4dbb"); //Purple
} else if (item.items[0].rarity.displayValue === "Legendary") {
$(".card").css("background-color", "#f3af19"); //Gold
} else if (item.items[0].rarity.displayValue === "Icon Series") {
$(".card").css("background-color", "#00FFFF"); //Cyan
} else {
$(".card").css("background-color", "rgb(148, 148, 150)");
}
});