Question

I am using a modal system which displays content on click, i will use it on a project that is integrated in a CMS but i would like to know if it is possible to use it with same structure, same id and class as below.

<div id="test">
    <a class="link" href="#">Link 1</a>
    <div id="basic-modal-content">
        Description 1
    </div>
</div>

<div id="test">
    <a class="link" href="#">Link 2</a>
    <div id="basic-modal-content">
        Description 2
    </div>
</div>  

I have tried the following jquery code, but it only works for the first one:

    $('#test').click(function (e) {
    $(this).find('#basic-modal-content').modal();

    return false;
});

I think there can be some trick or something, without the need of attending each modal an id/class dynamically. If there is a selector that will help me, please let me know.

Thanks for reading about my issue.

Answer 1

Don’t use ID’s unless it’s going to be a unique element. Use classes instead. If you’re selecting something using an ID, the jQuery object returned will refer only to the first one it finds, hence why ID’s should only be used on unique items.

Let me rephrase that better. ID’s should be unique. It’s fine to have ID’s on elements that aren’t unique, but that same ID shouldn’t be used anywhere else on the page.