Combining multiple IF ELSE statements into AND statements causes script to stop working

The following code worked properly, but another user recommended combining statements to make my code more efficient and less redundant. I implemented these changes, believing that this wouldn't cause any issues, but instead it brought my entire function to a halt.

function loginauth() {
var success = false;
/*roles (privilege levels) are defined as follows:
    priv0   =   User is not logged in
    priv1   =   User is logged in using the account "guest"
    priv2   =   User is logged in using a standard user account
    priv3   =   User is logged in using an elevated user account
    priv4   =   User is logged in using an administrator account
    priv5   =   User is logged in using the super administrator account
*/
var Xusername = document.getElementById("lsr1u").value;
var Xpassword = document.getElementById("lsr1p").value;
if (Xusername == "administrator") {
    if (Xpassword == "5YPwP7$luJailk1b2TCAdSEp7ZCfHUdRfwYm3mwc!1D3BP3ML8^00uoUXIncN8N") {
        success = true;
        role = "priv5";
        userFN = "Administrator";
    }
    else {
        document.getElementById("wrong").innerHTML = "The username or password is incorrect."
    }
}
else if (Xusername == "guest") {
    if (Xpassword == "guest") {
        success = true;
        role = "priv1";
        userFN = "Guest";
    }
    else {
        document.getElementById("wrong").innerHTML = "The username or password is incorrect."
    }
}
else if (Xusername == "admin") {
    if (Xpassword == "AdminPassw0rd$0") {
        success = true;
        role = "priv4";
        userFN = "Admin";
    }
    else {
        document.getElementById("wrong").innerHTML = "The username or password is incorrect."
    }
}
else if (Xusername == "jdoe") {
    if (Xpassword == "E2HfYrhyGEwcdWnAVgVD") {
        success = true;
        role = "priv2";
        userFN = "John Doe";
    }
    else {
        document.getElementById("wrong").innerHTML = "The username or password is incorrect."
    }
}
else {
    document.getElementById("wrong").innerHTML = "The username or password is incorrect."
}
if (success) {
    document.getElementById("wrong").innerHTML = ("");
    setTimeout(function() {
        nextauth();
    }, 475);
}
}

Simply combining multiple if statements into a single and statement causes the function to stop working:

function loginauth() {
var success = false;
var Xusername = document.getElementById("lsr1u").value;
var Xpassword = document.getElementById("lsr1p").value;
if (Xusername == "administrator" && Xpassword == "5YPwP7$luJailk1b2TCAdSEp7ZCfHUdRfwYm3mwc!1D3BP3ML8^00uoUXIncN8N") {
    success = true;
    role = "priv5";
    userFN = "Administrator";
}
}
else if (Xusername == "guest" && Xpassword == "guest") {
    success = true;
    role = "priv1";
    userFN = "Guest";
}
else if (Xusername == "admin" && Xpassword == "AdminPassw0rd$0") {
    success = true;
    role = "priv4";
    userFN = "Admin";
}
else if (Xusername == "jdoe" && Xpassword == "E2HfYrhyGEwcdWnAVgVD") {
    success = true;
    role = "priv2";
    userFN = "John Doe";
}
else {
    document.getElementById("wrong").innerHTML = "The username or password is incorrect."
}
if (success) {
    document.getElementById("wrong").innerHTML = ("");
    setTimeout(function() {
        nextauth();
    }, 475);
}
}

Absolutely NOTHING else has been changed.

To see the code not working live, please visit: http://ift.tt/2loOqPj

Hint: The usernames and passwords you can use are in the function!