JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>Lightbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://lokeshdhakar.com/projects/lightbox2/css/screen.css">
    <link rel="stylesheet" href="https://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">

  </head>
  <body>

    <div class="content">

      <!-- EXAMPLES -->

      <section id="examples" class="examples-section">
        <div class="container">
          <h3 style="clear: both;">Four image set</h3>
          <div class="image-row">
            <div class="image-set">
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="https://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance"></a>
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="https://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind"></a>
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you&apos;re viewing."><img class="example-image" src="https://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean"></a>
              <a class="example-image-link" href="https://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image"...

JavaScript

$(document).on('click','.lb-next', function(e) {
	alert(next);
	});
	$(document).on('click','.lb-prev', function(e) {
	alert(prev);
	});