Incorrect function in the loop

Instead of an animation acting on a specific block, it acts on all blocks. How to fix it?

<div class="grid"> <img src="http://www.tsstrade.ru/img_out/gallery_elements/archiveYeIdSI.jpg" alt="" width="100" height="100" class="image" /> <div class="content" id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste pariatur nesciunt quasi recusandae, voluptatem minus exercitationem, consectetur, vero possimus sequi magni odio cupiditate commodi iure ut accusamus neque voluptatum praesentium.</p> </div> 

  var image=document.querySelectorAll('.image'); var content = document.querySelectorAll('.content'); var wrap = document.getElementsByClassName('wrap')[0]; var tl = new TimelineMax(); body=document.getElementsByTagName('body')[0]; for(var i =0; i<image.length;i++){ console.log(image[i]); image[i].onclick=init(); } function init(){ return function(){ tl.add(changeBackground(),1) .add(changeImg(),1); } } function changeBackground(){ var tl = new TimelineMax(); tl.to(wrap,1,{ position:'fixed', width:'100%', height:'100%', left:'0px', top:'0px', backgroundColor:'#fff', zIndex:1 }); return tl; } function changeImg(){ var tl = new TimelineMax(); tl.to(content,1,{color:'red',display:'inline-block',top:'0px'},1); return tl; }