Wordpress - issue with the lightbox plugin inside a loop

Question

i'm having problems with the Lightbox Plus plugin. I need to create a bunch of elements in my homepage, and Lightboxes linked to them to show more content. Now, I managed to create all the elements needed, but the Lightboxes generated are all the same, all with contents related to the first of the elements to be specific. If inserted in the loop shouldnt each of them be related to his "starting element"? This is the code i'm using:

while ( $loop->have_posts() ) : $loop->the_post(); ?>

                <?php
                $id = get_the_ID();
                $big_image = get_field( "big_cocktail" );
                $thumb_image = get_field( "thumbnail_cocktail" );;
                $titolo_box = get_the_title();
                $sottotitolo_box = get_field( "sottotitolo_cocktail" );


                $h2_css = "margin-bottom: 5px !important;";
                $sottotitolo_css = "width:100% !important; text-align:center !important; padding-top: 5px !important; margin: 0 auto !important; margin-top:20px !important;";
                ?>

                <!--element-->
                <div class="element <?php echo $category -> slug; ?>" data-category="<?php echo $category -> slug; ?>">
                    <a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
                        <img alt="" class="imgwork" src="<?php echo $thumb_image; ?>" heigth="100px"/>
                    </a>

                    <!-- THIS IS THE DIV FOR THE LIGHTBOX -->
                  <div style="display:none">
                    <div id="lbp-inline-href-1" style="background: #fff; height:100%; background-image:url('<?php echo $big_image; ?>');">
                        <h2 style=""><?php echo $titolo_box; ?></h2>
                    </div>
                </div>
                   <!-- END DIV-->
                    <div class="worksarrow">
                    <a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
                        <img alt="" src="<?php echo get_template_directory_uri(); ?>/img/section-works/arrow.png" />
                    </a>
                    </div>
                    <a class="lbp-inline-link-1" href="#" style="text-decoration:none;">
                    <h2 style=""><?php echo $titolo_box; ?></h2>
                    </a>
                   <div class="sottotitolo_portfolio" style="<?php echo $sottotitolo_css; ?>">
                   <?php echo $sottotitolo_box; ?>                       </div>
                    <div class="worksbottom"></div>
                </div>



                <!--element-->

            <?php endwhile;
        }
        ?>

Answer 1

I've finally solved this. He was creating all the right popups but each of them needed a specific class and ID, so it just became:

< div id="lbp-inline-href-< ?php echo $index; ?>" style="background: #fff; height:100%; background-image:url('< ?php echo $big_image; ?>');">

< ?php $index++; ? >