Как сделать несколько кастомных селекторов?

const customSelect = document.querySelector(".custom-select");
const selectBtn = document.querySelector(".select-button");

const selectedValue = document.querySelector(".selected-value");
const optionsList = document.querySelectorAll(".select-dropdown li");

// add click event to select button
selectBtn.addEventListener("click", () => {
  // add/remove active class on the container element
  customSelect.classList.toggle("active");
  // update the aria-expanded attribute based on the current state
  selectBtn.setAttribute(
    "aria-expanded",
    selectBtn.getAttribute("aria-expanded") === "true" ? "false" : "true"
  );
});

optionsList.forEach((option) => {
  function handler(e) {
    // Click Events
    if (e.type === "click" && e.clientX !== 0 && e.clientY !== 0) {
      selectedValue.textContent = this.children[1].textContent;
      customSelect.classList.remove("active");
    }
    // Key Events
    if (e.key === "Enter") {
      selectedValue.textContent = this.textContent;
      customSelect.classList.remove("active");
    }
  }

  option.addEventListener("keyup", handler);
  option.addEventListener("click", handler);
});

.custom-select {
    position: relative;
    max-width: max-content;
    padding-bottom: 600px;
    display: flex; 
    align-items: center;
    gap: 9px;
  }
  
.select-button {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: max-content;
    gap: 4px;
}
.selected-value {
    font-size: 18px;
    line-height: 120%;
    color: blue;
}
  
.arrow {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #000;
  transition: transform ease-in-out 0.3s;
}
.select-dropdown {
    position: absolute;
    right: 0;
    top: 34px;
    list-style: none;
    width: 100%;
    background-color: #F3F4F8;
    border-radius: 15px;
    padding: 24px;
    max-height: 256px;
    overflow-y: auto;
    transition: 0.5s ease;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
}
.number .select-dropdown {
    padding: 24px 50px 24px 24px;
    width: 113px;
}
.select-dropdown li {
    position: relative;
    cursor: pointer;
    padding-top: 8px;
}
.select-dropdown li:first-child {
    padding-top: 0;
}  
  .select-dropdown li label {
    width: 100%;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.25);
  }
  .select-dropdown li:hover,
  .select-dropdown input:checked ~ label {
    color: blue
  }
  
.select-dropdown input:focus ~ label {
    color: blue;
}
  
.select-dropdown input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
}
  
  .custom-select.active .arrow {
    transform: rotate(180deg);
    margin-top: 0;
  }
  
  .custom-select.active .select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }

                    <div class="custom-select number">
                        <p class="text-gr-18">
                            Год:
                        </p>
                        <button
                          class="select-button"
                          role="combobox"
                          aria-label="select button"
                          aria-haspopup="listbox"
                          aria-expanded="false"
                          aria-controls="select-dropdown"
                        >
                        <span class="selected-value">2024</span>
                        <span class="arrow"></span>
                        </button>
                        <ul class="select-dropdown" role="listbox" id="select-dropdown">
                            <li role="option">
                                <input type="radio" id="2010" name="social-account" />
                                <label for="facebook">2010</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2011" name="social-account" />
                                <label for="facebook">2011</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2012" name="social-account" />
                                <label for="facebook">2012</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2013" name="social-account" />
                                <label for="facebook">2013</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2014" name="social-account" />
                                <label for="facebook">2014</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2015" name="social-account" />
                                <label for="facebook">2015</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2016" name="social-account" />
                                <label for="facebook">2016</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2017" name="social-account" />
                                <label for="facebook">2017</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2018" name="social-account" />
                                <label for="facebook">2018</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2019" name="social-account" />
                                <label for="facebook">2019</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="2020" name="social-account" />
                                <label for="facebook">2020</label>
                            </li>
                        </ul>
                    </div>
<div class="custom-select number">
                        <p class="text-gr-18">
                            Год:
                        </p>
                        <button
                          class="select-button"
                          role="combobox"
                          aria-label="select button"
                          aria-haspopup="listbox"
                          aria-expanded="false"
                          aria-controls="select-dropdown"
                        >
                        <span class="selected-value">Деловой вечер</span>
                        <span class="arrow"></span>
                        </button>
                        <ul class="select-dropdown" role="listbox" id="select-dropdown">
                            <li role="option">
                                <input type="radio" id="select-one" name="social-account" />
                                <label for="facebook">Деловой вечер/label>
                            </li>
                            <li role="option">
                                <input type="radio" id="select-two" name="social-account" />
                                <label for="facebook">Концерт</label>
                            </li>
                            <li role="option">
                                <input type="radio" id="select-three" name="social-account" />
                                <label for="facebook">Культурный вечер</label>
                            </li>
                        </ul>
</div>