[Solved] jQuery multiple getElementByID

Question

I think this will help you to achieve your goal. I have removed some unwanted details from your example, and try to keep it as simple as possible.

<div class="action" >
    <span class="MyBtn" rel="myModal1" style="color:orange">Title 1</span>
</div> 
<!-- The Modal 1 -->
<div id='myModal1' class="modal" style="display:none">
    <!-- Modal content 1 -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close"  rel="myModal1"  >X</span>
            <h2 style="text-align:center">Popup 1 header</h2>
        </div>
        <div class="modal-body">'Popup 1 content goes here...'</div>
        <div class="modal-footer"></div>
    </div>
</div>



<div class="action" >
    <span class="MyBtn" rel="myModal2" style="color:orange">Title 2</span>
</div> 
<!-- The Modal 2 -->
<div id='myModal2' class="modal" style="display:none">
    <!-- Modal content 2-->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close"  rel="myModal2" >X</span>
            <h2 style="text-align:center">Popup 2 header</h2>
        </div>
        <div class="modal-body">'Popup 2 content goes here...'</div>
        <div class="modal-footer"></div>
    </div>
</div>

The above html portion can be generated with the help of any looping structure. Please notice that I have write the id of the modal container in rel attribute at two different places.

In the span tag with MyBtn class.
In the span tag with close class.

You need to generate the unique id for your modal cotainer and also should be written there. (You can use $active_row->ID, insted of the serial number)

Here is the script, which will open and close the modal box.

<script type="text/javascript">
    var button_click = function() {
        var ModalID = this.getAttribute("rel");
        document.getElementById(ModalID).style.display = 'block';
    };

    var close_click = function() {
        var ModalID = this.getAttribute("rel");
        document.getElementById(ModalID).style.display = 'none';
    };


    // Get the button that opens the modal
    var btn = document.getElementsByClassName('MyBtn');

    // Get the <span> element that closes the modal
    var close = document.getElementsByClassName('close') ;

    // Assign the events to the buttons (open & close)
    for(iCount = 0; iCount < btn.length; iCount++) {
        btn[iCount].addEventListener('click', button_click, false) ;
        close[iCount].addEventListener('click', close_click, false) ;
    }
</script>

I wish it will help enough.

Have a great time.

Accepted Answer