I modified some lightbox code, and got it to work … but I am trying to make it activated if a user clicks one of the MANY links on the page … the code works for the 1ST link on the page, but if there is a second link somewhere on the page (to open the same popup), the link wont work. My javascript knowledge is pretty limited, so any help is appreciated…

(javascript code below)

$(document).ready(function($) {
  //open show lightbox
  $('#lightblink').on('click', function(event) {
    event.preventDefault();
    $('.lightbactivate').addClass('is-visible');
  });

  //close popup when clicking x or off popup
  $('.lightb').on('click', function(event) {
    if ($(event.target).is('.lightb-close') || $(event.target).is('.lightb')) {
      event.preventDefault();
      $(this).removeClass('is-visible');
    }
  });

  //close popup when clicking the esc keyboard button
  $(document).keyup(function(event) {
    if (event.which == '27') {
      $('.lightb').removeClass('is-visible');
    }
  });

});

which is activated when a link is clicked that has an id “lightblink” …

<a id="lightblink" href="#">OPEN POPUP</a>

The problem … I need multiple links on the page that can open the lightbox. See the codepen below …

https://codepen.io/jabbamonkey/pen/wvLgEKL