jQuery show unique popup for each link clicked

Question

I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID . When clicked, I want to show a popup which shows information unique to that link.

For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id: less_preview_popup-UNIQUE_ID (the unique id for the link and popup both match).

Here is a sample of my html code:

<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-801">
    THIS IS THE POPUP
</div>

<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>

<div class="lesson_preview_popup" id="lesson_preview_popup-802">
    THIS IS THE POPUP 2
</div>

Here is the jquery i'm currently using:

jQuery('.library_vid_link').click(function( event ) {
    event.preventDefault();
    $('.lesson_preview_popup').css('top', '25%');
    $('body').addClass('no-scroll'); 
});

The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?

Answer 1

Use the data-attribute:

<a data-popup="lesson_preview_popup_801" ....

And

$("#"+$(this).data("popup")).show().css('top', '25%');

Using $(this).next() instead, assumes that the div to show is the next sibling of the link

Answer 2

Change this:

$('.lesson_preview_popup').css('top', '25%');

into this:

$(this).next().css('top', '25%');

Alternatively , save the ID (eg 801) in a new attribute, like this:

<a data-id="801" ...

Then, call the popup like this:

jQuery('.library_vid_link').click(function( event ) {
    event.preventDefault();
    var thisId = $(this).attr("data-id"); //get "801"
    $('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
    $('body').addClass('no-scroll'); 
});

Answer 3

Jquery .next() select next sibling of element. Use it like bottom example

$('.library_vid_link').click(function( event ) {
    event.preventDefault();
    $(this).next().show().css('top', '25%');
    $('body').addClass('no-scroll'); 
});

 $('.library_vid_link').click(function( event ) { //event.preventDefault(); $(this).next().show().css('top', '25%'); //$('body').addClass('no-scroll'); }); 

 .lesson_preview_popup { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO </a> <div class="lesson_preview_popup" id="lesson_preview_popup-801"> THIS IS THE POPUP </div> <a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO </a> <div class="lesson_preview_popup" id="lesson_preview_popup-802"> THIS IS THE POPUP 2 </div>