too long

Question

I'm trying to make a page that gets entries from a database and displays them in a <div> called "gallery-item". However the lightbox works, it only shows the first entry of the database. I hope someone can make sense of this code and may be able to help me with my problem.

My html/php/sql

<?php if (isset($_POST["Website"])) {
            $query=$db->prepare("SELECT * FROM `portfoliodb`.`website`");
            $query->execute();

            while   ( $row = $query->fetch()){
                $website_id = $row['website_id'];
                $website_name = $row ['website_name'];
                $website_desc_en = $row ['website_desc_en'];
                $website_tags = $row ['website_tags'];
                $website_image = $row ['website_image'];
                $website_type = $row['website_type'];
                echo'
                    <div class="background hidden" id="background"></div>
                        <a>
                            <div class="lightbox hidden" id="lightbox">
                                <div class="box-title hidden" id="box-title">
                                    <h4 class="hidden" id="box-title-h">' . htmlspecialchars($website_name) . '</h4>
                                    <h4 class="close hidden" id="close">X</h4>
                                </div>
                                <div class="box-img hidden" id="box-img">

                                </div>
                                <div class="box-foot hidden" id="box-foot">
                                    <div class="box-space hidden" id="box-space"></div>
                                    <div class="box-desc hidden" id="box-desc">
                                        <p class="desc-text hidden" id="box-text">'. htmlspecialchars($website_desc_en) .' </p>
                                    </div>
                                    <div class="tag-space-box hidden" id="box-tags-space"></div>
                                    <div class="tag-box hidden" id="box-tags">
                                        <small id="box-small" class="hidden">'. htmlspecialchars($website_tags) .'</small>
                                    </div>
                                </div>
                            </div>
                        </a>
                    <a>
                    <div class="gallery-item-web button" id="button">
                        <p class="gallary-item-text">';
                echo htmlspecialchars($website_name);
                echo'</p>';
                echo '<i class="fa fa-desktop fa-3x position-icon"></i>
                        </div></a>
                        ';
            }}

The gallery shows all entries in the database so that works fine, the only problem is that the lightbox shows the first entry, so if I were to have a database with the entries "Apples, Pears, Oranges", the gallery would display "Apples, Pears, Oranges". But the lightbox would display "Apples" on every single entry.

My Jquery

$(document).ready(function(){
$(".button").click(function(){
    $("#background").toggleClass("hidden");
    $("#lightbox").toggleClass("hidden");
    $("#box-title").toggleClass("hidden");
    $("#box-title-h").toggleClass("hidden");
    $(".close").toggleClass("hidden");
    $("#box-img").toggleClass("hidden");
    $("#box-foot").toggleClass("hidden");
    $("#box-space").toggleClass("hidden");
    $("#box-desc").toggleClass("hidden");
    $("#box-text").toggleClass("hidden");
    $("#box-tags-space").toggleClass("hidden");
    $("#box-tags").toggleClass("hidden");
    $("#box-small").toggleClass("hidden");
});
$(".close").click(function(){
    $("#background").toggleClass("hidden");
    $("#lightbox").toggleClass("hidden");
    $("#box-title").toggleClass("hidden");
    $("#box-title-h").toggleClass("hidden");
    $(".close").toggleClass("hidden");
    $("#box-img").toggleClass("hidden");
    $("#box-foot").toggleClass("hidden");
    $("#box-space").toggleClass("hidden");
    $("#box-desc").toggleClass("hidden");
    $("#box-text").toggleClass("hidden");
    $("#box-tags-space").toggleClass("hidden");
    $("#box-tags").toggleClass("hidden");
    $("#box-small").toggleClass("hidden");
});
$(".background").click(function(){
    $("#background").toggleClass("hidden");
    $("#lightbox").toggleClass("hidden");
    $("#box-title").toggleClass("hidden");
    $("#box-title-h").toggleClass("hidden");
    $(".close").toggleClass("hidden");
    $("#box-img").toggleClass("hidden");
    $("#box-foot").toggleClass("hidden");
    $("#box-space").toggleClass("hidden");
    $("#box-desc").toggleClass("hidden");
    $("#box-text").toggleClass("hidden");
    $("#box-tags-space").toggleClass("hidden");
    $("#box-tags").toggleClass("hidden");
    $("#box-small").toggleClass("hidden");
});

});

(It's pretty bad I know, this is my first time using Jquery)

This is the Jquery for the lightbox, it toggles the class on every item of the lightbox to "hidden". Whih basically makes every item with that class invisible, great for a lightbox.

Answer 1

First off, you don't need to add class of "hidden" to every element. You can just add it to the container element and then all tags inside would also be hidden.

Your main mistake was to have the same ids and classes for all images, you will need to ensure that each image has an unique identifier.

Try my solution: https://jsfiddle.net/3vhv90ce/2/

HTML:

<div class="container1">
    <div class="background" id="background"></div>
        <a>
            <div class="lightbox" id="lightbox">
                <div class="box-title" id="box-title">
                    <h4 class="" id="box-title-h">name</h4>
                    <h4 class="close" id="close">X</h4>
                </div>
                <div class="box-img" id="box-img">

                </div>
                <div class="box-foot" id="box-foot">
                    <div class="box-space" id="box-space"></div>
                    <div class="box-desc" id="box-desc">
                        <p class="desc-text" id="box-text">description</p>
                    </div>
                    <div class="tag-space-box" id="box-tags-space"></div>
                    <div class="tag-box" id="box-tags">
                        <small id="box-small" class="">tags</small>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="gallery-item-web button" data-id="1">
    <p class="gallary-item-text">Click me</p>
    <i class="fa fa-desktop fa-3x position-icon"></i>
</div>

<div class="container2">
    <div class="background" id="background"></div>
        <a>
            <div class="lightbox" id="lightbox">
                <div class="box-title" id="box-title">
                    <h4 class="" id="box-title-h">name</h4>
                    <h4 class="close" id="close">X</h4>
                </div>
                <div class="box-img" id="box-img">

                </div>
                <div class="box-foot" id="box-foot">
                    <div class="box-space" id="box-space"></div>
                    <div class="box-desc" id="box-desc">
                        <p class="desc-text" id="box-text">description</p>
                    </div>
                    <div class="tag-space-box" id="box-tags-space"></div>
                    <div class="tag-box" id="box-tags">
                        <small id="box-small" class="">tags</small>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="gallery-item-web button" data-id="2">
    <p class="gallary-item-text">Click me</p>
    <i class="fa fa-desktop fa-3x position-icon"></i>
</div>

JS:

$(document).ready(function(){
    $(".button").click(function(){
        $('.container'+$(this).data('id')).toggleClass("hidden");
    });
});

CSS:

.hidden {
    display: none;
}
.gallery-item-web {
    cursor: pointer;
}