Динамическое всплывающее окно с одинаковым идентификатором

Question

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

Мой код:

// Display relative pop-ups to which link is clicked containing information about the field.
Y.delegate('click', function openPopUpInfo(e) {
    var panel,
    link = e.target.get('id'),
        content = Y.one('#' + link + 'Info');

    content.setStyle('display', 'block');
    panel = new Y.Panel({
        id: 'popUpPanel',
        centered: true,
        modal: true,
        visible: false,
        constrain: true,
        render: true,
        zIndex: 100,
        bodyContent: content,
        width: 350,
        height: 250,
        close: true,
        plugins: [Y.Plugin.WidgetAnim, Y.Plugin.OverlayKeepaligned],
        buttons: [{
            value: '',
            section: Y.WidgetStdMod.HEADER,
            action: function (e) {
                e.halt();
                panel.hide();
            }
        }]
    });

    panel.show();
}, '#interestfreetab', '.infoLink');

Answer 1

Как насчет простого счетчика?

var count = 0;
//existing code
id: 'popUpPanel' + count
//existing code
count++;

Answer 2

Установить глобальную переменную изначально как

numberOfPopUps=0;

затем, когда вы создаете новую панель, когда идентификатор объявлен, измените

panel = new Y.Panel({ id: 'popUpPanel',

в

panel = new Y.Panel({ id: 'popUpPanel'+numberOfPopups,

затем после увеличения декларации

numberOfPopUps++;