I'm having difficulties on getting toggle function to work for clicking on images

I'm having difficulties on getting toggle function to work for clicking on images

So I have a bunch of clickable text.
When I click on a text it reveals an image and when I click on the image it collaspes back.
I got this working with the slide toggle function but my code is written in the way that all the images reveals itself and not just the one that was clicked.

I'm not sure how to get it working where only the clicked text reveals the image and not toggling all the images on the page as it's curently doing.

HTML:
        <div class="page">
   
            <p>
                <span class="text">text1 - i</span> <img class="img" src="i1.png">
            </p>

            <p>
                <span class="text">text2 - ii</span> <img class="img" src="i2.png">
            </p>

Js:
function main() {
    
$('.text').click(function() { 
    $('.img').slideToggle("fast");
});

$('.img').click(function() { 
    $('.img').slideToggle("fast");
});

}
$(document).ready(main);

I'm a bit of a beginner in all this javascript stuff...