lightgallery.js multiple instances not working

I am trying to use "LighGallery.js" in my page.

Situation: I have several groups of images and each group should be displayed in its own gallery. For each group, there is 1 image visible, and the rest are hidden and are to be shown in a gallery when the first visible image is clicked.

Problem: The gallery triggers for the only the first category. It does not triggers gallery view for the rest of the images.

Question: How can I use multiple instances of galleries. I can't seem to figure it out from the documentation. Anyone worked on this before?

What I have tried: I read around and tried using the Hash plugin that comes along. It still did not work:

Code structure:

HTML:

<div class="topleft">
  <!--Gallery 1st picture triggers-->
  <ul>
    <li>
      <a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
    <li>
      <a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
  </ul>
  <!------------------->

  <!--Individual galleries surrounded by DIVs-->
  <div>
    <a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    <a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
  </div>

  <div>
    <a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    <a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
  </div>
  <!------------------->
</div>

JS:

$(".topleft").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery1",
  selector: '.gallery1'
});

$(".topleft").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery2",
  selector: '.gallery2'
});

Thanks you

FIX:

<div class="topleft--g1">
<div class="topleft--g2">
  <!--Gallery 1st picture triggers-->
  <ul>
    <li>
      <a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
    <li>
      <a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
    </li>
  </ul>
</div>
</div>

---

$(".topleft--g1").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery1",
  selector: '.gallery1'
});

$(".topleft--g2").lightGallery({
  thumbnail: true,
  hash: true,
  galleryId: "gallery2",
  selector: '.gallery2'
});

P.S. hash: true <- delete it. 'True' by default https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-hash