javascript if statement multiple operators failing

I have an if statement which evaluates

if(expression || expression &&
   expression || expression){

   //logic
} 

for a reason I cannot understand, the else statement after the and operator does not get evaluated. Is there some rules to the if statement that I do not know of?

Here is my code:

const fillTable = function (array) {
    let tbody = document.querySelector("#tblbody");
    while (tbody.firstChild) {
        tbody.removeChild(tbody.firstChild);
    }
    array.forEach(element => {
        let region = regionOption.options[regionOption.selectedIndex].value;
        let gender = genderOption.options[regionOption.selectedIndex].value;
        elementGender = Object.values(element)[2];
        elementRegion = Object.values(element)[3];
        console.log(elementRegion + "+" + region);
        console.log(elementGender + "+" + gender);

        if (elementRegion === region || region === "All" &&
            elementGender === gender || gender === "bot") {
            let tr = document.createElement("tr");
            tbody.appendChild(tr);
            const values = Object.values(element);
            values.forEach(element => {
                let td = document.createElement("td");
                td.appendChild(document.createTextNode(element));
                tr.appendChild(td);
            })
        }
    })
};

the loop continues even though the genders does not match in the if statement.