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

Question

[Валерий]

У меня имеется на сайте, несколько popup окон, при клике на кнопку, это окно всплывает, и человек может выбрать определенное место в ЖД поезде.
К сожалению JavaScript работает только в первом popup окне. Если производить какие либо действия в остальных popup окнах, то вся информация, о выбранном месте стоимости билетов, будет отображаться в первом popup окне.

$(".sa-scheme__berth-place").click(function() { // .sa-scheme__berth-place класс билетов которые выбирают пользователь. 
//Во всех popup окнах, он одинаковый.
    var btn = document.getElementById('btn'); // Здесь я выбираю кнопку с атрибутом id="btn". 
//В каждом popup окне, 1 кнопка с данным id
    var price = $(this).text(); //манипуляция со строкой price
    price = price.replace(/[^0-9.]/g, '');
    price = price.replace(/.(?=.{5})/g, '');
    if (!this.classList.contains('sa-scheme__berth-place_disabled')) {
       $(this).toggleClass("active");
       var text = "&nbsp;<span>" + this.innerHTML + "</span>,";
        $("#t12552").html($("#t12552").html().replace(text, ""));
        if ($(this).hasClass("active")) {
            $("#t12552").append(text);
            btn.classList.remove("wg-button_disabled"); //если какое либо место выбранно, удаляем из кнопки класс, а так же //атрибут disable
            btn.removeAttribute('disabled');
            var value = $("#t12552").children().length * price; //высчитывание цены билетов.
            document.getElementById("value").innerHTML = value; //обновление значения переменной value
        } else {
            value = $("#t12552").children().length * price;
            document.getElementById("value").innerHTML = value; //обновление значения переменной value
        }
    }
    if ($(".sa-scheme__berth-place.active").length) {
        $(".double-dots").show(); 
        $("#value").show();
    } else {
        $(".double-dots").hide();
        $("#value").hide();
        btn.classList.add("wg-button_disabled");
        btn.addAttribute("disabled");
    }
});

Покажу как скрипт работает на практике:
Человек открывает popup Плацкарт, выбирает любое свободное место, и появляется кнопка с id btn, а так же высчитывается общая цена выбранных билетов, и сколько мест выбрал человек.

Если человек подобное провернуть в popup "купе"

вся информация появится в первом popup окне!!

Как это фиксить, вообще в голову не приходит, пытался использовать циклы, скрипт не работает.
Прошу объяснить, как это должно работать, ну и какие функции помогут мне с фиксом данной проблемы.
Если у вас возникнут вопросы, по коду, прошу задавайте, постараюсь ответить.

Answer 1

[Alex]

Не разбирал ваш код досконально, но скорее всего проблема в том, как вы выполняете поиск элементов по селектору. Предполагаю, что вы выполняете поиск глобально, что и приводит к проблемам.
Обычно, даже для оптимизации, я ограничиваю поиск не по всему документу, а по какому-то контейнеру.

const modal1 =  document.querySelector('#modal-1')
const modal2 =  document.querySelector('#modal-2')

modal1.querySelector('button.send') // кнопка в первой модалке
modal1.querySelector('.status').textContent = '...' // статус в первой модалке

modal2.querySelector('button.send') // кнопка во второй модалке
modal2.querySelector('.status').textContent = '...' // статус во второй модалке

Comments

[Валерий]

Т.е мне мой скрипт, для каждого popup прописывать? При этом выполняя поиск элементов, по выбранному селлектору?

[Alex]

Валерий, Оберните весь функционал в какую-то функцию, которая принимает аргумент container. А дальше всё то же самое, но выполняйте поиск элементов не по всему документу, а только по контейнеру.
Например вместо
$(".sa-scheme__berth-place.active")
Будет что-то в таком духе

$(container).find(".sa-scheme__berth-place.active")

[Alex]

Валерий, ...
А Вместо
document.getElementById('btn')
Будет что-то в таком духе
container.querySelector('#btn')

[Валерий]

Alex, а как можно будет определить, в каком контейнере произошло событие клик?

[Alex]

Валерий, функция-обработсик имеет доступ к переменной контейнера через замыкание

[Валерий]

Alex, Ну я использую ключевое слово this, оно возвращает span, никакого блока родителя в параметрах, я не увидел. Может у вас есть пример скрипта, как подобное реализуется.

[Валерий]

Alex, Спасибо за помощь, проблему решил!