Twój HTML nie ma zbyt przyjaznej struktury do wyszukiwania w nim odpowiednich elementów DOM, więc bez modyfikacji HTMLa można rozwiązać problem poniższym (trochę "drucianym") skryptem:
const teamScoreInputs = [...document.querySelectorAll('#p2, #p3')];
document.querySelector('form').addEventListener('change', ({ target }) => {
const searchedInput = teamScoreInputs.find((input) => input === target);
if (searchedInput) {
const areInputsFilledAndEqual = teamScoreInputs.every((input) => {
return input.value !== '' && input.value === teamScoreInputs[0].value;
});
if (areInputsFilledAndEqual) {
const boxToBeHidden = document.querySelectorAll(
`option[value="${teamScoreInputs[0].name}"], option[value="${
teamScoreInputs[1].name
}"]`
)[0];
boxToBeHidden.parentNode.style.display =
'none';
boxToBeHidden.parentNode.previousElementSibling.style.display =
'none';
}
}
});
Skrypt znajduje pola, do których wpisuje się wyniki meczu dla dwóch drużyn. Na podstawie odpowiednich atrybutów ich elementów DOM sprawdza, czy wypełnione zostały oba pola oraz czy te wartości są równe. Jeśli tak, ukrywa box i jego "etykietę" znajdując je na podstawie selektora CSS, do którego podaję nazwy państw.