Javascript - DOM element regaining initial value after callback method exit

I have some callback methods for some socket.io events. In one of the event, I change the body's background-color to red and in another event, I change it to yellow.

when I am debugging into the issue of why yellow is not being reflected, I see that during step by step debugging, the body's color is changing to yellow but as soon as the method gets finished it changes back to red.

Here are my two callback events.

function initScore(data) {

    $('body').css('background', 'red')  // <-- color changes and is saved

    $('.waiting-modal').hide()
    let j = JSON.parse(data);
    roundId = j.id;
    delete j.id
    players = j["players"];
    delete j["players"]
    $('#scores').html('')
    for (key in j) {
        console.log(j[key])
        $('#scores').append('<p><strong>' + j[key][0] + ': </strong>' + `${j[key][1].wins} / ${j[key][1].losses}` + '</p>')    
    }
}

function gameOver(data) {
    $('body').css('background', 'yellow')    // <-- changes to yellow but turns back red.
}

Here are my callback events

socket.on('init_scores', initScore)
socket.on('gameOver', gameOver);

This is a strange behavior I have never faced anytime.