Using the Alerts extension for the WP Job Manager plugin. A list of user-created alerts is presented with some info on each alert. I want to show the info in a popup instead of on the list. Created a button that when clicked opens the popup with the info relevant for that specific alert.

It works in general, but the problem is that no matter which button I click (for alert #1, alert #2, alert #3 etc), it always opens the popup of alert #1.

How can I apply the effect to the relevant item only? tried playing around with .closest() but doesn't work, or I am not using it right. Been Googling for hours and trying to maybe find a way to assign unique ID to each alert (I cannot predefine them, since each user will have different number of alert-entries)

Example HTML

<td>
    <h4>Alert #1</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #2</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #3</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>

CSS

.alert-popup {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}
.alert-popup-overlay {
    /* some styling for popup overlay */
}
.alert-popup-content {
    /* some styling for popup content */
}
.close-alert-popup {
    /* some styling for popup close button */
}
.flipAlertsRightIn {
    /* some styling for popup animation */
}
@keyframes flipAlertsRightIn {
    /* keyframes for the animation */
}

jQuery

(function($) {
  $.fn.openPopup = function( settings ) {
    var elem = $(this);
    // Establish default settings
    var settings = $.extend({
      anim: 'fade'
    }, settings);
    elem.show();
    elem.find('.alert-popup-content').addClass(settings.anim+'In');
  }

  $.fn.closePopup = function( settings ) {
    var elem = $(this);
    // Establish default settings
    var settings = $.extend({
      anim: 'fade'
    }, settings);
    elem.find('.alert-popup-content').removeClass(settings.anim+'In').addClass(settings.anim+'Out');

    setTimeout(function(){
        elem.hide();
        elem.find('.alert-popup-content').removeClass(settings.anim+'Out')
      }, 500);
  }

}(jQuery));

// Click functions for popup
$('.open-alert-popup').click(function(){
  $('#'+$(this).data('id')).openPopup({
    anim: (!$(this).attr('data-animation') || $(this).data('animation') == null) ? 'fade' : $(this).data('animation')
  });
});
$('.close-alert-popup').click(function(){
  $('#'+$(this).data('id')).closePopup({
    anim: (!$(this).attr('data-animation') || $(this).data('animation') == null) ? 'fade' : $(this).data('animation')
  });
});

Using the Alerts extension for the WP Job Manager plugin. A list of user-created alerts is presented with some info on each alert. I want to show the info in a popup instead of on the list. Created a button that when clicked opens the popup with the info relevant for that specific alert.

It works in general, but the problem is that no matter which button I click (for alert #1, alert #2, alert #3 etc), it always opens the popup of alert #1.

How can I apply the effect to the relevant item only? tried playing around with .closest() but doesn't work, or I am not using it right. Been Googling for hours and trying to maybe find a way to assign unique ID to each alert (I cannot predefine them, since each user will have different number of alert-entries)

Example HTML

<td>
    <h4>Alert #1</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #2</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #3</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>

CSS

.alert-popup {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}
.alert-popup-overlay {
    /* some styling for popup overlay */
}
.alert-popup-content {
    /* some styling for popup content */
}
.close-alert-popup {
    /* some styling for popup close button */
}
.flipAlertsRightIn {
    /* some styling for popup animation */
}
@keyframes flipAlertsRightIn {
    /* keyframes for the animation */
}

jQuery

(function($) {
  $.fn.openPopup = function( settings ) {
    var elem = $(this);
    // Establish default settings
    var settings = $.extend({
      anim: 'fade'
    }, settings);
    elem.show();
    elem.find('.alert-popup-content').addClass(settings.anim+'In');
  }

  $.fn.closePopup = function( settings ) {
    var elem = $(this);
    // Establish default settings
    var settings = $.extend({
      anim: 'fade'
    }, settings);
    elem.find('.alert-popup-content').removeClass(settings.anim+'In').addClass(settings.anim+'Out');

    setTimeout(function(){
        elem.hide();
        elem.find('.alert-popup-content').removeClass(settings.anim+'Out')
      }, 500);
  }

}(jQuery));

// Click functions for popup
$('.open-alert-popup').click(function(){
  $('#'+$(this).data('id')).openPopup({
    anim: (!$(this).attr('data-animation') || $(this).data('animation') == null) ? 'fade' : $(this).data('animation')
  });
});
$('.close-alert-popup').click(function(){
  $('#'+$(this).data('id')).closePopup({
    anim: (!$(this).attr('data-animation') || $(this).data('animation') == null) ? 'fade' : $(this).data('animation')
  });
});

• jquery
• javascript
• css
• html

1 Answer 1

You are facing this issue because all your popup container divisions have the same id and all the popup open can close buttons are targeting the same id. Change your code as follow:

<td>
    <h4>Alert #1</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts_1" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts_1" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts_1" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #2</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts_2" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts_2" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts_2" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>
<td>
    <h4>Alert #3</h4>
    <a href="#" class="open-alert-popup" data-id="popup_alerts_3" data-animation="flipAlertsRight">Open Button</a>
      <!- below div is hidden till above link is clicked ->     
      <div id="popup_alerts_3" class="alert-popup" style="display: none;">
         <div class="alert-popup-overlay"></div>
         <div class="alert-popup-content">
            <a href="#" class="close-alert-popup" data-id="popup_alerts_3" data-animation="flipAlertsRight">Close Button</a>
                <!- some popup content here ->
         </div>
      </div>
</td>

jQuery operates on first identified elements basis when it comes to id attributes because ids are supposed to be unique for each element on the page. You will see that changing the data-id attribute and id attribute resolves all your problem and you can make it dynamic if the content that you are showing is coming from a loop.