Calling a php page to create a new image is producing the same image over and over

Question

Consider me a noob in jQuery/javascript.

I have 3 images in a single page.

<img id="img1" src="img/create_image1.php"></img>
<img id="img2" src="img/create_image2.php"></img>
<img id="img3" src="img/create_image3.php"></img>

I am creating the image from a file, and adding some strings/numbers/drawings around it. The images are representing digits from 1 to 9.

My create_imageX.php is the next:

<?php
    session_start();
    create_image();
    exit();

    function create_image()
    {
        $width = 150;
        $height = 150; 
        $image = ImageCreate($width, $height);  
        $num1 = rand(1,9);
        $num2 = rand(2,5);
        $name = 'images/test';
        $ni = $num1 . $num2 . '.gif';
        $src = imagecreatefromgif($ni);

        $_SESSION["img_X"] = $num1; //X is the same as the X from create_imageX.php

        $white = ImageColorAllocate($image, 255, 255, 255);
        $black = ImageColorAllocate($image, 0, 0, 0);
        $grey = ImageColorAllocate($image, 204, 204, 204);
        $darkgrey = ImageColorAllocate($image, 100, 100, 100);

        ImageFill($image, 0, 0, $black);    

        imagecopy($image, $src, rand(0,($width/2)-10), rand(0,($height/2)-20), 0, 0, 100, 100);

        //Code omitted of adding strings/drawings/numbers/w.e in mind for clarity
        header("Content-Type: image/jpeg"); 
        ImageJpeg($image);
        ImageDestroy($image);
    }
?>

I also have an input, and when the text is changed, I am calling a CheckImage.php page which checks if the written digit corresponds to the first image. Returns "true" or "false".

What I am trying to do next is swap image2 to image1 and image3 to image2 and create the image3 from scratch. I am using this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#inputId').on('input',function(e){
            $.ajax({
              url: 'CheckImage.php?img='+$('#inputId').val(), 
              success: function(data) {
                  if (data == "true") {
                        //do something
                  }
                  else {
                      //do something else
                  }
              },
              complete: function() {
                  $('#inputId').val("");
                  $('#img1').attr("src",$('#img2').attr("src"));
                  $('#img2').attr("src",$('#img3').attr("src"));
                  $('#img3').attr("src","img/create_image3.php");
              }
            });
        });
    });
</script>

After the first time, the images are correctly swapped. First image is being swapped to second image. Second one is being swapped with the third one. Third one is being generated to a new one.

The problem is the next:

• After second input Image2 and Image3 will be the same. (no new image generated for Image3)
• After third input Image1, Image2 and Image3 will all be the same. (Image3 doesn't get generated again, so now they all have the same image).

How can I fix that in a way that each time Image3 will be generated and I won't have the same three images showing?

Answer 1

Try to set a different GET parameter, when calling the image, so it is not loaded from Browser or Server Cache:

$('#img3').attr("src","img/create_image3.php?v="+random_number);