How to fix a jQuery code looping incorrectly in a PHP foreach loop

Question

I'm trying to loop a piece of jQuery code inside a foreach loop. Each article in the loop have a phone number custom post type related (ACF). At this point the loop works well.

As you see, the jQuery code only replace an image to another while user clicks in order to show the number (Ex : "Display Phone Number" image, becomes "555-555-1234").

The problem is that when I click in any image to display number...all articles show their phone number at the same time. I think is an ID problem in my jQuery code. After two days of searching and testing different codes this problem still not resolved yet.

Any suggestions/tracks will be very welcome !

Thanks

====

Things I have tried :

1. I have tried to put the jQuery code outside the foreach (same result)

2. I have tried to change the id image into a class (works better)

3. I have tried different jQuery functions (replaceWith(), show(), etc)

foreach ($related_posts_articles as $related_post ){

    <div class="col-sm-6 col-md-6 col-lg-3 col-xs-12">

        <div>
            <a href="<?php echo get_permalink($related_post->ID); ?> ">
                <?php echo get_the_post_thumbnail($related_post->ID,"square-300",array('class' => 'img-responsive')); ?>   
            </a>
            <div>
                <a href="<?php echo get_permalink($related_post->ID); ?>">
                    <h2>
                        <?php echo wp_html_excerpt(strip_tags(get_field('acf_titre_mini', $related_post->ID)), 30, '...' ); ?>
                    </h2>
                </a>
                <div>
                    <?php echo wp_html_excerpt( strip_tags(get_field('acf_description_mini',$related_post->ID)), 129, '...' ); ?>    
                </div>

                <!-- START bloc number -->
                <?php if( get_field('acf_numero_image', $related_post->ID) ): ?>
                    <div>
                        <img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
                        <script>
                            jQuery(document).ready(function($) {
                                $( ".input_img" ).click(function() {
                                    $( ".input_img" ).attr( "src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
                                });
                            });
                        </script>
                    </div>
                <?php endif; ?>
                <!-- END bloc number -->

            </div>
        </div>
   </div>
}

Answer 1

Take note of the 'this' Context

When an event fires in jquery the callback function this context is set to the element which the event was fired from.

jQuery(document).ready(function($) {
    $(".input_img").click(function() {
        // Use `this` to target the event element
        $(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
    });
});

Advice: You shouldn't generate same jquery code inside each iteration of the for each. Since you're repeating unnecessary code. You can harness HTML data-* attributes to achieve the outcome you seek.