I have following jQuery code

$(document).ready(function() { 
    for(var i=1;i<4;i++) { 
        var img= ".img"+i; 
        var p= ".p"+i;
        $(img).on("click", function(){
            $(p).hide(); 
        }); 
    } 
});

Applied on the following html:

<div>
                    <article>
                        <h1>Over mezelf <img src='images/plus.png' class='img1'/></h1>
                        <p class='p1'>Test</p>
                    </article>
                    <article>
                        <h1>Contact <img src='images/plus.png' class='img2'/></h1>
                        <p class='p2'>Test</p>
                    </article>
                    <article>
                        <h1>Website <img src='images/plus.png' class='img3'/></h1>
                        <p class='p3'>Test</p>
                    </article>
                </div>

When I click on the images, the last <p> disappears, it doesn't work on the other ones.