Дублируются значения в переиспользуемом кастомном
Есть страница на которой расположено два идентичных кастомных select. Проблема заключается в дублировании выбранных данных. При клике на label во втором select, выбранное значение подставляется во второй и в первый select. В console выводится сначала click по выбранному select -> записывается значение в input, после происходит click по другому select -> записывается значение в input. + в console выводятся все предыдущие итерации.
Первый select во вкладке Мои покупки, второй select находится во вкладке Мои баллы. Если я выбираю в select "Вчера", то это значение заносится во все select.
<!-- Календарь для фильтрации чеков по дате -->
<div class="calendar__main d-fl">
<div class="calendar__wrapper d-fl-col">
<label class="calendar__label js-calendarLabelError">Необходимо выбрать дату</label>
<input type="text" class="calendar__input js-calendar__input" readonly placeholder="Выберите дату">
<div class="select__calendar-content js-selectContent d-fl-col">
<input type="radio" id="singleSelect0" class="select__calendar-input" name="singleSelect">
<label for="singleSelect0" class="select__option select__calendar-label js-select__option" data-calendar-time="yestrday">Вчера</label>
<input type="radio" id="singleSelect1" class="select__calendar-input" name="singleSelect">
<label for="singleSelect1" class="select__option select__calendar-label js-select__option" data-calendar-time="last-week">Неделю назад</label>
<input type="radio" id="singleSelect2" class="select__calendar-input" name="singleSelect">
<label for="singleSelect2" class="select__option select__calendar-label js-select__option" data-calendar-time="last-month">Месяц назад</label>
<input type="text" class="select__option js-calendarDateRange" id="calendar__date-picker" data-date-format="dd.mm.yyyy" data-language='ru' placeholder="Выбрать дату" name="calendar-check">
</div>
</div>
<button class="btn__calendar js-showCalendarDate">Показать</button>
</div>
// функция для выбора option
function chooseCalendarDate() {
let calendarInput = document.querySelectorAll(".js-calendar__input"); // input в котором будет выбранный option
let radioBtnCalendarLabel = document.querySelectorAll(".js-select__option"); // label по которому происходит click для выбора данных
let calendarDateRange = document.querySelector(".js-calendarDateRange"); // input на котором открывается календарь
// при клике на input открывается контент с option
calendarInput.forEach((inputCalendar, index) => {
inputCalendar.addEventListener("click", () => {
const mainContent = document.querySelector(".main_content");
inputCalendar.nextElementSibling.classList.add("active"); // контент с option
mainContent.classList.add("active");
// закрытие контента при клике на option + выбор данных
radioBtnCalendarLabel.forEach((labelBtn) => {
labelBtn.addEventListener("click", (e) => {
inputCalendar.value = e.target.textContent; // заносим новые данные в input
inputCalendar.nextElementSibling.classList.remove("active"); // контент с option
console.log(e.target);
console.log(inputCalendar.value, inputCalendar, index);
});
});
// закрытие контента при клике на пустое пространство
mainContent.addEventListener("click", (e) => {
if (e.target !== inputCalendar && e.target !== calendarDateRange) {
if (calendarDateRange.value.length > 0) {
inputCalendar.value = calendarDateRange.value; // заносим новые данные в input
calendarDateRange.value = ""; // обнуляем данные для дальнейшего открытия
}
mainContent.classList.remove("active");
inputCalendar.nextElementSibling.classList.remove("active"); // контент с option
}
});
});
});
}
chooseCalendarDate();