WP Loop Geo + jQuery .hide() not working correctly - php

Question

I have a WP loop where each post has a collection of 4 country based images (using ACF).
I only would like to output 1 image per country, however it is displaying all of 4 images per post.
<?php
$args = array( 'post_type' => 'quick_links', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$image_au = get_field("au_image");
$image_nz = get_field("nz_image");
$image_us = get_field("us_image");
$image_gl = get_field("global_image"); //default image
?>
<script type="text/javascript">
var image_au = <?php echo json_encode($image_au['url']); ?>;
var image_nz = <?php echo json_encode($image_nz['url']); ?>;
var image_us = <?php echo json_encode($image_us['url']); ?>;
var image_gl = <?php echo json_encode($image_gl['url']); ?>;
jQuery.get("http://ipinfo.io", function (response) {
if (response.country === "AU"){
jQuery("#resultQLAU").show();
jQuery("#resultQLNZ").hide();
jQuery("#resultQLUS").hide();
jQuery("#resultQLGlobal").hide();
} else if(response.country === "NZ"){
jQuery("#resultQLNZ").show();
jQuery("#resultQLAU").hide();
jQuery("#resultQLUS").hide();
jQuery("#resultQLGlobal").hide();
} else if(response.country === "US"){
jQuery("#resultQLUS").show();
jQuery("#resultQLNZ").hide();
jQuery("#resultQLAU").hide();
jQuery("#resultQLGlobal").hide();
} else {
jQuery("#resultQLGlobal").show();
jQuery("#resultQLNZ").hide();
jQuery("#resultQLUS").hide();
jQuery("#resultQLAU").hide();
}
if(image_au === "" && image_nz === "" && image_us === "" && image_gl !== ""){
jQuery("#resultQLGlobal").show();
}
}, "jsonp");
</script>
<?php
echo '<div class="col-lg-4 col-sm-6" style="padding:2px">';
echo '<a href="' . get_field('page_url') . '" class="portfolio-box">';
?>
<div id="resultQLAU">
<img class="img-responsive" src="<?php echo $image_au['url']; ?>" alt="<?php echo $image_au['alt']; ?>" />
</div>
<div id="resultQLNZ">
<img class="img-responsive" src="<?php echo $image_nz['url']; ?>" alt="<?php echo $image_nz['alt']; ?>" />
</div>
<div id="resultQLUS">
<img class="img-responsive" src="<?php echo $image_us['url']; ?>" alt="<?php echo $image_us['alt']; ?>" />
</div>
<div id="resultQLGlobal">
<img class="img-responsive" src="<?php echo $image_gl['url']; ?>" alt="<?php echo $image_gl['alt']; ?>" />
</div>
<?php
echo '<div class="portfolio-box-caption">';
echo '<div class="portfolio-box-caption-content">';
echo '<div class="project-category text-faded">' . get_the_title() . '</div>';
echo '<div class="project-name">' . get_the_content() . '</div>';
echo '</div>';
echo '</div>';
echo '</a>';
echo '<h6 class="news-title text-center">' . get_the_title() . '<span style=""> <i class="fa fa-angle-double-right"></i></span></h6>';
echo '</div>';
endwhile;
?>
I originally had the code e.g <div id="resultQLAU" style="display:none"> and just had jQuery("#resultQLAU").show(); in script which outputed only the first
GEO image of the first post (so GEO was working correct for that 1 post)
Not sure what problem is?
Your help would be much appreciated. Thanks

Answer 1

You are using ID inside your loop so all the block will have the same ids which isn't good as id need to be unique. You may change this by adding a suffix/prefix depending the iteration and use classes instead.
1) add a new var the increment inside your loop like this :
$i = 0
while ( $loop->have_posts() ) : $loop->the_post();
$i++;
2) for each id append the content of $i, for example :
jQuery(".resultQLAU_<?php echo $i; ?>").show();
do this everywhere you have the id.