Можно ли использовать оператор else if для поэтапного раскрытия элементов с помощью JavaScript? ⇐ CSS

[Anonymous]

Изменить: Спасибо! Эта проблема решена. Это был мой первый вопрос о StackExchange, и вы все были очень любезны, ответив так быстро, подробно и подробно.
Я создаю страницу с кнопкой «добавить еще одну задачу». При каждом нажатии один скрытый элемент должен изменить свойства CSS со «скрытого» на «видимое», добавляя на страницу еще одну строку входных данных. Мне удалось показать их все одновременно, но я пытаюсь показать строки по одной.
Вот что я написал на данный момент. В противном случае, если утверждения имели для меня наибольший смысл, судя по сообщениям SE, которые я читал о них, но при первом нажатии кнопки обе скрытые строки («задача2» и «задача3») открываются одновременно. Я использую неправильный тип условного оператора? Или операторы должны находиться внутри своих собственных функций внутри функции showNextTask? Буду признателен за любую помощь!
function showNextTask() {
let task2 = document.querySelector("#task-2-row");
let task3 = document.querySelector("#task-3-row");

if ((task2.style.visibility === "hidden")) {
task2.style.visibility = "visible";
task2.style.maxHeight = "80px";
} else if (
(task2.style.visibility === "visible") &&
(task3.style.visibility === "hidden")
) {
task3.style.visibility = "visible";
task3.style.maxHeight = "80px";
}
}

let nextInputTask = document.querySelector("#add-another-task-button");
nextInputTask.addEventListener("click", showNextTask);

В соответствии с просьбой ниже, вот HTML-код задачи 2 (задача 3 идентична):












И CSS:
#task-2-row {
visibility: hidden;
max-height: 0;
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... nts-with-j