Dynamic ID with JQUERY functions

I have a problem with my JQUERY code. Here’s the code:

$maxcounter = $( '.testimonio-popup[id^="popup-"]' ).length;
var i = 0;

while (i < $maxcounter) {
  $('#open-'+i).on('click', function() {
    $('#popup-'+i).fadeIn('slow');
    $('.testimonio-overlay').fadeIn('slow');
    $('.testimonio-overlay').height($(window).height());
    return false;
  });

  $('#close-'+i).on('click', function(){
    $('#popup-'+i).fadeOut('slow');
    $('.testimonio-overlay').fadeOut('slow');
    return false;
  });

  i++;
}

It takes correctly the total of times the .testimonio-popup div is appearing in the site, and the fadeIn action for .testimoniooverlay class works.

But the fadeIn action for #popup-[number] is not working. Any help why?

For further assistance, I attach the PHP code that makes the query:

function get_the_content_with_formatting ($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
  $content = get_the_content($more_link_text, $stripteaser, $more_file);
  $content = apply_filters('the_content', $content);
  $content = str_replace(']]>', ']]>', $content);
  return $content;
}

add_shortcode( 'testimonios', 'display_testimonios' );
function display_testimonios($atts){

    $atributos = shortcode_atts([  'grupo' => 'PORDEFECTO',  ], $atts);
    $buffer = '<div class="testimonio-overlay"></div> ';
    $contadorid = 0;
    $q = new WP_Query(array(
        'post_type' => 'test',
        'tax_query' => array(
          array(
          'taxonomy' => 'grupos_testimonios',
          'field' => 'slug',
          'terms' => $atributos['grupo']
          //'terms' => 'grupo-1'
           )
        )
    ) );  
    while ($q->have_posts()) {
            $q->the_post();
            $buffer .= '<div class="testimonio">';
            $buffer .= '<div class="testimonio-img">' . get_the_post_thumbnail($_post->ID).'</div>';
            $buffer .= '<div class="testimonio-titulo"><p>' . get_the_title() .'</p></div>';
            $buffer .= '<div class="testimonio-intro"><div class="testimonio-parrafo">' . get_the_excerpt() . '</div><button class="testimonio-boton" id="open-'.$contadorid.'">Leer más</button></div></div>';
            $buffer .= '<div class="testimonio-popup" id="popup-'.$contadorid.'"><div class="testimonio-popup-contenido"><div class="testimonio-cerrar"><button class="testimonio-boton-cerrar" id="close-'.$contadorid.'">x</button></div>';
            $buffer .= '<div class="testimonio-popup-titulo"><p>' . get_the_title() .'</p></div>';
            $buffer .= '<div class="testimonio-popup-contenido">' . get_the_content_with_formatting() . '</div></div></div>';
            $contadorid = $contadorid + 1;

    }
    wp_reset_postdata();
    return $buffer;
}

Thank you! Frede

Answer

@Rory McCrossan is right (see comment). I’m not sure what goes wrong there, but I would suggest you change this logic:

$("#open-1").on(....);
$("#open-2").on(....);
$("#open-3").on(....);
$("#close-1").on(....);
$("#close-2").on(....);
$("#close-3").on(....);
$("#popup-1").fadeIn()
$("#popup-2").fadeIn()

to using classes and attributes:

$(".popup-handler").on(.. check if open/close -> then action..);
$(".popup").filter(.. check for specific reference..).fadeIn()

And if you want to interact elements with different classes, add data attributes to them so you can find them when needed. Here is a simple example:

<!-- popup nr 1 -->
<div class="popup-handler" data-rel="1" data-action="open"></div>
<div class="popup" data-rel="1">
  <div class="popup-handler" data-rel="1" data-action="close"></div>
</div>
<!-- popup nr 2 -->
<div class="popup-handler" data-rel="2" data-action="open"></div>
<div class="popup" data-rel="2">
  <div class="popup-handler" data-rel="2" data-action="close">x</div>
</div>

<!-- jQuery -->
$(".popup-handler").on("click", function() {
  /* get popup reference & action */
  var rel = $(this).data("rel"),
    action = $(this).data("action");
  /* find the target popup */
  var $popup = $(".popup").filter("[data-rel=" + rel + "]");
  if (action == "open") {
    $popup.fadeIn("slow");
    /* ... other code when opening a popup... */
  }
  if (action == "close") {
    $popup.fadeOut("slow");
    /* ... other code when closing a popup... */
  }
});

Demo here – 4 popups, working: jsfiddle

(Defining the same functions inside a while loop is generally a bad idea.)