灯箱画廊已串联

Question

I have 3 divs implemented as lightbox gallery (3 separate galleries), which are being triggered by clicking on a button. The div is thus set to display:none initially. I've tried to trigger the div via button click by the below method, which is just working correctly. But, all the 3 galleries are getting concatenated ie in the modal that opens, its showing images of other divs. What could possibly be wrong?

Script

    $('#button1').on('click', function() {
         $('#div1').show();
    });
    $('#button2').on('click', function() {
         $('#div2').show();
    });
    $('#button3').on('click', function() {
         $('#div3').show();
    });

Answer 1

Used data-gallery="example-gallery" for every box.

like div1 boxes images should have  data-gallery="example-gallery1" attribute.
div2 boxes images should have data-gallery="example-gallery2" attribute.
div3 boxes images should have data-gallery="example-gallery3" attribute.

Like:

data-gallery="example-gallery1" 
data-gallery="example-gallery2"
data-gallery="example-gallery3"

 <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
            </a>