Кастомный select заставить работать с несколькими списками

[info50]

Добрый день!

Я только начинаю изучать javascript. Есть небольшой скрипт выпадающего списка на select и радиокнопки, который работает только с одним списком. Если добавить еще один, то второй список уже не открывает. Подскажите пожалуйста, как заставить скрипт обрабатывать несколько списков на странице или подскажите похожий пример.

Понимаю, что необходимо сделать в цикле, по блокам select-box, но как не знаю.

Сейчас я использую три скрипта для трех списков.

Заранее всем спасибо!

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");
 
      selected.addEventListener("click", () => {
         optionsContainer.classList.toggle("active");
      });
 
      optionsList.forEach(o => {
         o.addEventListener("click", () => {
            selected.innerHTML = o.querySelector("label").innerHTML;
            optionsContainer.classList.remove("active");
 
         });
      });

<div class="select-box">
  <div class="options-container">
     <div class="option">
        <label for="automobiles" class="button_cost">
                <input type="radio" class="radio" value="" id="automobiles" name="category" /> All</label>
     </div>
 
     <div class="option">
        <label for="film" class="button_cost">
                <input type="radio" class="radio" value=".pink" id="film" name="category" /> Film</label>
     </div>
 
     <div class="option">
 
        <label for="science" class="button_cost">
        <input type="radio" class="radio" value=".blue" id="science"  name="category" /> Science</label>
     </div>
  </div>
 
  <div class="selected">
     Select Video Category
  </div>
</div>