<div> Overruling Other <div>'s

Issue

I'm building my website with the Skeleton CSS Boilerplate, and inside the grid I want to use the free lightbox "HTML5 LightBox". However, when I click on any of the lightboxes, it seems to be overruled by my first lightbox/div.

It's doing my head in, and as I'm more or less a beginner to HTML, I have no idea where the fault in the code might be.

The images show up right, and the p class="imgtext" is also showing correct, however, when I click on the second image, I get the lightbox for Website 1.

Here's a snippet of the first two colums, with their corresponding lightboxes inside:

<div class="container main">
<div class="row">

    <div class="four columns portfolio">
        <div id="mydiv" style="display:none;">
            <div class="lightboxcontainer">
                <div class="lightboxleft">
                    <div class="divtext">
                        <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 1</p>
                        <p class="divdescription" style="font-size:14px;line-height:20px;">xxxWonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                    </div>
                </div>
                <div class="lightboxright">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>
        
        <a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >        
        <div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
            <a href="#">
                <img class="grid" src="images/rven.jpg"  />
                <p class="imgtext">
                <span>
                    <span>Website 1</span>
                </span>
                </p>
            </a>
        </div>
        </a>
    </div><!-- End of element-->
    
    <div class="four columns portfolio">
        <div id="mydiv" style="display:none;">
            <div class="lightboxcontainer">
                <div class="lightboxleft">
                    <div class="divtext">
                        <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 2</p>
                        <p class="divdescription" style="font-size:14px;line-height:20px;">WonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                    </div>
                </div>
                    <div class="lightboxright">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                    </div>
                <div style="clear:both;"></div>
            </div>
        </div>
        
        <a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >        
        <div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
            <a href="#">
                <img src="images/sortelunger.jpg"  />
                <p class="imgtext">
                <span>
                    <span>Website 2</span>
                </span>
                </p>
            </a>
        </div>
        </a>
    </div><!-- End of element-->
</div>

If anyone has any idea, or could point me in the right direction, I would be more than thankful.

Kind regards.

Solution

After fiddeling around for a while, I figured it out myself.

The problem was that I was referring to the div id "mydiv" all the way through. If I set the first div id to "mydiv1", and made the href to mydiv1, it would automatically chose the right div.

Here's the code with the proper id's:

<div class="container main">
<div class="row">

<div class="four columns portfolio">
    <div id="mydiv1" style="display:none;">
        <div class="lightboxcontainer">
            <div class="lightboxleft">
                <div class="divtext">
                    <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 1</p>
                    <p class="divdescription" style="font-size:14px;line-height:20px;">xxxWonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                </div>
            </div>
            <div class="lightboxright">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>

    <a href="#mydiv1" class="html5lightbox" data-width="800" data-height="400" >        
    <div href="#mydiv1" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
        <a href="#">
            <img class="grid" src="images/rven.jpg"  />
            <p class="imgtext">
            <span>
                <span>Website 1</span>
            </span>
            </p>
        </a>
    </div>
    </a>
</div><!-- End of element-->

<div class="four columns portfolio">
    <div id="mydiv2" style="display:none;">
        <div class="lightboxcontainer">
            <div class="lightboxleft">
                <div class="divtext">
                    <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 2</p>
                    <p class="divdescription" style="font-size:14px;line-height:20px;">WonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                </div>
            </div>
                <div class="lightboxright">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                </div>
            <div style="clear:both;"></div>
        </div>
    </div>

    <a href="#mydiv2" class="html5lightbox" data-width="800" data-height="400" >        
    <div href="#mydiv2" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
        <a href="#">
            <img src="images/sortelunger.jpg"  />
            <p class="imgtext">
            <span>
                <span>Website 2</span>
            </span>
            </p>
        </a>
    </div>
    </a>
</div><!-- End of element-->

Answered By - Fox