Код при заданных условиях в блоке if не выполняется как нужно. Помогите пожалуйста разобраться в чем может быть проблема

Question

Я пытаюсь сделать связанную форму, где есть дом (это селект с названиями улиц), помещение(инпут, в котором по поиску отображаются номера квартир)и еще один инпут(где по поиску отображаются имена жителей этих квартир). Мне нужно сделать так, чтобы по выбору улицы дома в селекте, во втором инпуте отображались, только жители этого дома. Если в селекте ничего не выбрано то во втором инпуте при поиске отображаются все жители. Если выбрано название улицы в селекте и квартира в первом инпуте, то во втором инпуте должны отображаться жители именно этого дома и квартиры. Есть несколько условий, согласно описанию выше. При выполнении этих условий должен выполняться код, но дело в том, что выполняется код только для 1, 4 и 5 условия, а для 2 и 3 блока if, код не выполняется. При чем, когда убираешь 4 и 5 условия с кодом внутри, 1, 2 и 3 начинают работать....Такое ощущение, что те, условия, которые написаны последними, перекрывают предыдущие. Помогите пожалуйста, разобраться в чем проблема.

let select = document.querySelector(".search-form__houses");
    let options = select.options;
    let houses = JSON.parse(`[
  {
    "id": 1,
    "name":"Ленина 1"
  },
  {
    "id": 2,
    "name":"Республики 1"
  }
]`
);

houses.forEach(elem => {
  select.add(new Option (elem.name))
  select.selectedIndex = -1;
});
     let apartments = JSON.parse(`[
  {
    "id": 1,
    "hid": 1,
    "name":"Кв. 1",
    "area": 20
  },
  {
    "id": 2,
    "hid": 1,
    "name":"Кв. 2",
    "area": 30
  },
  {
    "id": 3,
    "hid": 1,
    "name":"Кв. 3",
    "area": 50
  },
  {
    "id": 4,
    "hid": 1,
    "name":"Кв. 4",
    "area": 120
  },
  {
    "id": 5,
    "hid": 1,
    "name":"Кв. 5",
    "area": 20
  },
  {
    "id": 6,
    "hid": 1,
    "name":"Кв. 6",
    "area": 30
  },
  {
    "id": 7,
    "hid": 2,
    "name":"Кв. 1",
    "area": 120
  },
  {
    "id": 8,
    "hid": 2,
    "name":"Кв. 2",
    "area": 130
  },
  {
    "id": 9,
    "hid": 2,
    "name":"Кв. 3",
    "area": 150
  },
  {
    "id": 10,
    "hid": 2,
    "name":"Кв. 4",
    "area": 220
  },
  {
    "id": 11,
    "hid": 2,
    "name":"Кв. 5",
    "area": 120
  },
  {
    "id": 12,
    "hid": 2,
    "name":"Кв. 6",
    "area": 130
  }
]
`);
let apartmentSearch = document.querySelector(".search-form__apartments");
let apartmentList = document.createElement("ul");
apartmentSearch.insertAdjacentElement("afterEnd",apartmentList);
for(element of apartments){
let apartmentItem = document.createElement("li");
apartmentItem.innerHTML = element.name;
apartmentList.appendChild(apartmentItem);
apartmentItem.classList.add("search-form__apartmentItem")
apartmentItem.setAttribute("id", element.id);
// apartmentItem.classList.add(element.hid);
apartmentItem.setAttribute("data-num", element.hid);
}


let items = document.querySelectorAll(".search-form__apartmentItem");
apartmentList.classList.add("hide");
apartmentSearch.addEventListener("input", function(){
  let value = this.value.trim().toUpperCase();
  if(value!=""){
    for(item of items){
    if(item.innerHTML.toUpperCase().search(value) == -1 || item.dataset.num == "2" && select[0].selected === true){
    item.classList.add("hide");
  }
  if(item.innerHTML.toUpperCase().search(value) == -1 || item.dataset.num == "1" && select[1].selected === true){
    item.classList.add("hide");
  }
  apartmentList.classList.remove("hide");
  }
}else{
  for(item of items){
    item.classList.remove("hide"); 
  }
  apartmentList.classList.add("hide");
 }
}); 
  
select.addEventListener("change", addAdress);
function addAdress(){
  let i=-1;
  if(select[0].selected === true){
      for(let element of apartments){
       i++
    if( items[i].dataset.num =="1"){
      items[i].innerHTML= select[0].innerHTML + " " + element.name;
    }
   } 
   apartmentList.classList.add("hide");
   apartmentSearch.setAttribute("placeholder", "Введите помещение");
   apartmentSearch.value = "";
   peopleList.classList.add("hide");
   peopleSearch.setAttribute("placeholder", "Введите помещение");
   peopleSearch.value = " ";
   
}
if(select[1].selected === true){ 
      for(let element of apartments){
      i++
      if( items[i].dataset.num == "2"){
          items[i].innerHTML= select[1].innerHTML + " " + element.name; 
    }
   } 
   apartmentList.classList.add("hide");
   apartmentSearch.setAttribute("placeholder", "Введите помещение");
   apartmentSearch.value = " ";
   peopleList.classList.add("hide");
   peopleSearch.setAttribute("placeholder", "Введите помещение");
   peopleSearch.value = "";

  } 
 }; 
 
apartmentList.addEventListener("click", function(event){
      let target = event.target;
      apartmentSearch.value = target.innerHTML;
      apartmentList.classList.add("hide");   
for(let item of peopleItems){  
  item.setAttribute("data-target", target.id);
}
});
  
let people = JSON.parse(`[
  {
    "id": 1,
    "aid": 1,
    "name":"Иванов А.И."
  },
  {
    "id": 2,
    "aid": 1,
    "name":"Иванова И.Н."
  },
  {
    "id": 3,
    "aid": 1,
    "name":"Иванова Л.А."
  },
  {
    "id": 4,
    "aid": 1,
    "name":"Иванов С.А."
  },
  {
    "id": 5,
    "aid": 2,
    "name":"Рыков С.А."
  },
  {
    "id": 6,
    "aid": 2,
    "name":"Рыкова М.О."
  },
  {
    "id": 7,
    "aid": 3,
    "name":"Сидоров С.И."
  },
  {
    "id": 8,
    "aid": 3,
    "name":"Сидорова А.В."
  },
  {
    "id": 9,
    "aid": 3,
    "name":"Сидорова О.С."
  },
  {
    "id": 10,
    "aid": 4,
    "name":"Морозов С.И."
  },
  {
    "id": 11,
    "aid": 4,
    "name":"Морозова А.В."
  },
  {
    "id": 12,
    "aid": 4,
    "name":"Морозов О.С."
  },
  {
    "id": 13,
    "aid": 5,
    "name":"Галимов С.И."
  },
  {
    "id": 14,
    "aid": 5,
    "name":"Галимова А.В."
  },
  {
    "id": 15,
    "aid": 5,
    "name":"Галимов О.С."
  },
  {
    "id": 16,
    "aid": 6,
    "name":"Галимов С.И."
  },
  {
    "id": 17,
    "aid": 6,
    "name":"Галимова А.В."
  },
  {
    "id": 18,
    "aid": 7,
    "name":"Троекуров А.И."
  },
  {
    "id": 19,
    "aid": 7,
    "name":"Троекурова С.В."
  },
  {
    "id": 20,
    "aid": 8,
    "name":"Ибрагимов Р.В."
  },
  {
    "id": 21,
    "aid": 8,
    "name":"Ибрагимова З.А."
  },
  {
    "id": 22,
    "aid": 9,
    "name":"Сидоркин А.А."
  },
  {
    "id": 22,
    "aid": 9,
    "name":"Сидоркина Т.А."
  },
  {
    "id": 23,
    "aid": 9,
    "name":"Сидоркина А.А."
  },
  {
    "id": 24,
    "aid": 10,
    "name":"Зарубин В.А."
  },
  {
    "id": 25,
    "aid": 10,
    "name":"Зарубина Я.А."
  },
  {
    "id": 26,
    "aid": 10,
    "name":"Зарубин А.В."
  },
  {
    "id": 27,
    "aid": 11,
    "name":"Горюнов О.А."
  },
  {
    "id": 28,
    "aid": 11,
    "name":"Горюнова Ю.А."
  },
  {
    "id": 29,
    "aid": 11,
    "name":"Горюнов А.О."
  },
  {
    "id": 30,
    "aid": 12,
    "name":"Козлов К.А."
  },
  {
    "id": 31,
    "aid": 12,
    "name":"Козлова Т.А."
  },
  {
    "id": 32,
    "aid": 12,
    "name":"Козлов М.К."
  },
  {
    "id": 33,
    "aid": 12,
    "name":"Козлова К.К."
  }
]
`);
let peopleSearch = document.querySelector(".search-form__people");
let peopleList = document.createElement("ul");
peopleSearch.insertAdjacentElement("afterEnd",peopleList);
for(element of people){
let peopleItem = document.createElement("li");
peopleItem.innerHTML = element.name;
peopleList.appendChild(peopleItem);
peopleItem.classList.add("search-form__peopleItem");
peopleItem.setAttribute("id",element.id);
peopleItem.setAttribute("data-flat",element.aid);
};
let peopleItems = document.querySelectorAll(".search-form__peopleItem");
peopleList.classList.add("hide");
peopleSearch.addEventListener("input", function(){
  let value = this.value.trim().toUpperCase();
  if(value!=""){
    for(item of peopleItems){
    if(item.innerHTML.toUpperCase().search(value) == -1){
    item.classList.add("hide");
    }
    //1 условие
  }
    for(item of peopleItems){
     if(item.id >= parseInt("17") && item.id <= parseInt("33") && select[0].selected === true){
    item.classList.add("hide");
} 
// 2 условие
}for(item of peopleItems){
 if(item.id >= parseInt("1") && item.id <= parseInt("16") && select[1].selected === true){
    item.classList.add("hide");
} 
}
// 3 условие
for(item of peopleItems){
    if( item.dataset.target != item.dataset.flat && select[0].selected === true){
    item.classList.add("hide");
}
}
// 4 условие
for(item of peopleItems){
if(item.dataset.target != item.dataset.flat && select[1].selected === true){
    item.classList.add("hide");
} 
} 
//5 условие
peopleList.classList.remove("hide");  
} else{
  for(item of peopleItems){
    item.classList.remove("hide"); 
  }
  peopleList.classList.add("hide");
 }
});

.wrapper__container{
    width: 600px;
    margin: 0 auto;
}
.search-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
   
}
.search-form__title{
    color:grey;
    font-size: 14px;
}
.search-form__title::after{
    content:"*";
    color: red;
    margin:0 0 0 5px;
}
.style{
   flex: 0 0 25px;
   padding: 0 0 0 5px; 
   box-shadow: 0 0 5px grey;
   border: none;
}
ul{
    padding:0;
}
ul li{
    list-style-type: none;
    padding: 10px 0 10px 5px;
}
ul li:hover{
    background:#e2e3df;
}
.hide{
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
    <div class="wrapper">
        <div class="wrapper__container">
            <form class="search-form" action="#">
             <p class="search-form__title">Дом</p>
             <select class="search-form__houses style"></select>
             <p class="search-form__title">Помещение</p>
             <input class="search-form__apartments style" type="text" placeholder="Введите помещение"> <span class="search-form__apartments__delete"></span></input>
             <p class="search-form__title">Проживающий</p>
             <input class="search-form__people style" type="text" placeholder="Введите проживающего"><span class="search-form__people__delete"></span></input>
            </form>
        </div>
    </div>
    <script src="form.js"></script>
    
</body>
</html>

БЛОГ НА HUSL

Код при заданных условиях в блоке if не выполняется как нужно. Помогите пожалуйста разобраться в чем может быть проблема

Ответы (0 шт):