Html - JS: проблема с отображением нескольких div с js

Question

Я хочу использовать приведенный ниже код, используя html, js и css, чтобы изменить тег выбора на переключатели. когда я использую это для одного элемента div, он работает, но при использовании нескольких div код js не работает, и при выборе другого элемента открывается только первый селектор, а другой не работает. В чем проблема в JS?

Вот код:

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");

const optionsList = document.querySelectorAll(".option");
const selectedList = document.querySelectorAll(".selected");

selectedList.forEach(o =>{
    o.addEventListener("click", ()=>{
        
        optionsContainer.classList.toggle("active");        
        
    });
});


optionsList.forEach(o =>{
    o.addEventListener("click", ()=>{
        selected.innerHTML = o.querySelector("label").innerHTML;
        optionsContainer.classList.remove("active");
    });
});

.select-box {
    display: flex;
    width: 400px;
    flex-direction: column;
    
}

.select-box .options-container{
    background: #2f3640;
    color: #f5f6fa;
    max-height: 0;
    width: 100%;
    opacity:0;
    transition: all 0.4s;
    border-radius: 8px;
    overflow: hidden;
    order: 1;
}

.selected {
    background: #2f3640;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #f5f6fa;
    position: relative;
    order: 0;
}

.selected::after{
    content: "";
    background: url("down-arrow.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 100%;
    width: 32px;
    right: 10px;
    top: 12px;
    
    transition: all 0.4s;
}


.select-box .options-container.active{

    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
    
}

.select-box .options-container.active + .selected::after{
    transform: rotateX(180deg);
    top: -6px;
}

.select-box .options-container::-webkit-scrollbar{
    width: 8px;
    background: #0d141f;
    border-radius: 8px 8px 8px 8px;
}
.select-box .options-container::-webkit-scrollbar-thumb{
    background: #525861;
    border-radius: 8px 8px 8px 8px;
}


.select-box .option,
.selected{
    padding: 12px 24px;
    cursor: pointer;
}

.select-box .option:hover{
    background: #414b57;
}

.select-box label{
    cursor: pointer;
}

.select-box .option .radio{
    display: none;
}

<div class="container">
  <div class="select-box">
    <div class="options-container">
      <div class="option">
        <input type="radio" class="radio" id="student" name="job"   value="student">
        <label for="student">student</label>
      </div>
      <div class="option">
        <input type="radio" class="radio" id="teacher" name="job" value="teacher">
        <label for="teacher">teacher</label>
      </div>
      <div class="option">
        <input type="radio" class="radio" id="worker" name="job" value="worker">
        <label for="worker">Worker</label>
      </div>
                                                        
    </div>
    <div class="selected">
      Please Select
    </div>
  </div>
</div>

<br />

<div class="container">
  <div class="select-box">
    <div class="options-container">
      <div class="option">
        <input type="radio" class="radio" id="work" name="favourite"   value="work">
        <label for="work">work</label>
      </div>
      <div class="option">
        <input type="radio" class="radio" id="play" name="favourite" value="play">
        <label for="play">play</label>
      </div>
      <div class="option">
        <input type="radio" class="radio" id="reading" name="favourite" value="reading">
        <label for="reading">reading</label>
      </div>
                                                        
    </div>
    <div class="selected">
      Please Select Your Favourite
    </div>
  </div>
</div>

Редактировать: Могу ли я использовать 'for' l oop для включения каждого div в js? Или как лучше?

Answer 1

<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
<br><br>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <option value="">--Please choose an option--</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>