Как открыть несколько модов из нескольких плиток продукта, имеющих одинаковую структуру DOM?

Question

Я использую здесь модальный бустрап, настроенный до некоторой степени.У меня есть следующий HTML в одном продукте на PLP моего сайта:

    <div class="modal size-variants fade pr-0" id="tumbler-size-modals" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-body">
                <p>Variants are loading..</p>
            </div>
        </div>
    </div>

Этот модал запускается из этого тега a:

   <div class="more-sizes-link hide-mobile">
        <a href="javascript:void(0)" data-toggle="modal" data-target="#tumbler-size-modals">
            <isprint value="${Resource.msg('more.sizes.text.nonmobile', 'plp', null)}" />
        </a>
    </div>

Это CSS длято же самое:

.modal-backdrop.show{
    opacity: 0;
}

.modal-open{
    overflow-y: visible;
}

.modal{
    position: absolute;
    top: unset;
    bottom: 23%;
    border: 1px solid $border-grey;
    background-color: $transparent-white;
}

В настоящее время этот модал появляется, как и ожидалось, для одной плитки продукта на PLP, но когда я пытаюсь открыть тот же модал из другой плитки, когда открыт другой модал, никаких действий не происходит,Что я могу сделать, чтобы выскочить этот модал из нескольких плиток товара.

Вот изображение, на котором модал успешно отображается для одной плитки товара:

Это ссылка, по которой нужно щелкнуть, чтобы успешно открыть модал специально для данной плитки товара:

Я хочуоткрыть другой модал из отмеченной ссылки, пока открыт другой.Итак, как мне достичь того же?

Есть ли что-то конкретное, что мне нужно иметь в виду, чтобы добиться этого?

Я не добавил ISML в тегихотя я пытаюсь сделать это с помощью шаблонов Demandware ISML, но это не имеет отношения к вопросу, который у меня есть.

Answer 1

На мой комментарий, вы хотите убедиться, что идентификатор является уникальным. Я поместил пример переменной в идентификатор, но вы хотите убедиться, что она работает для вашей системы.

    <div class="modal size-variants fade pr-0" id="tumbler-size-modals-${product_id}" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-body">
                <p>Variants are loading..</p>
            </div>
        </div>
    </div>


   <div class="more-sizes-link hide-mobile">
        <a href="javascript:void(0)" data-toggle="modal" data-target="#tumbler-size-modals-${product_id}">
            <isprint value="${Resource.msg('more.sizes.text.nonmobile', 'plp', null)}" />
        </a>
    </div>

Answer 2

Идентификатор и соответствующая цель данных должны быть уникальными, добавить идентификатор продукта или что-то уникальное для id="tumbler-size-modals"