JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thumb_1" class="fancy-thumb">
    <div>
  <a class="fancybox-thumb" id="gal-1" rel="gal-1"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
  .........
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-1"><img src="./foo/bar.baz"/></a>
</div>
</div>
.........
<div id="thumb_10" class="fancy-thumb">
    <div>
  <a class="fancybox-thumb" id="gal-10" rel="gal-10"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
  .........
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
  <a class="fancybox-thumb" rel="gal-10"><img src="./foo/bar.baz"/></a>
</div>
</div>

JavaScript

// fancybox is initialized in after document ready
//$(".fancybox-thumb").fancybox();

// this function should trigger fancybox
function openGal(e){
   var gal_id = $(e.currentTarget).attr("id");
   alert("hhu");
   $("#" + gal_id).trigger("click");
   return false;
   // note that here I've tried almost everything found at stackoverflow
   // but nothing seems to work
}

// listeren looks like this
$(".fancy-thumb >").click(function(e) {
    alert("hsus");
    openGal(e);
});