else if statement does not get evaluated in client browser - javascript socket.io

I am implementing a basic chat in the style of Slack, and I am at the point where I want to give the users the option to message each other privately.

When a user sends a request for a private chat to another user and the other accepts, a button with the name of the other user should appear in each of the users' browser.

The problem is that at the moment, a button appears in each user's interface, but only the user who sent the request (user 1) gets a button with the other user's name, while the other only gets a button with no text in it. Code is as follows:

socket.on("setting up private chat buttons", data => {

privateChannelButton = document.createElement('button');
privateChannelButton.className = "new-button btn btn-dark";

if (localStorage.getItem('userName') == data["user 1"]){

    privateChannelButton.innerHTML = data["user 2"];    
    console.log("case 1 happened");

}

else if (localStorage.getItem('userName') == data["user2"]) {

    privateChannelButton.innerHTML = data["user 1"];
    console.log("case 2 happened");

}

document.querySelector('#channels').appendChild(privateChannelButton);

});

If I look at what the console outputs, basically it's always "case 1 happened", as if as soon as the first condition is evaluated to true by one of the browsers, both of them skip to the next block of code which is the adding of the button. Why is this?