Javascript: onclick function in generated elements

Question

I'm trying to add an onclick function into generated image nodes. I want there to be a few pictures displayed together on the page (which is working) and for a picture that is clicked to grow and cover most of the page.

My problem right now is that the picture which grows is not the one clicked on but the last one displayed. I've messed around quite a bit with the function's position and the function itself, but I can't seem to get it to work.

function showGallery() {
  var div = document.getElementById("gallerydiv");
  for (i = 0; i < 11; i++) {
    var img = document.createElement("img");
    img.src = "img" + i + ".jpg";
    img.className = "galimg";
    img.id = "img" + i;
    img.onclick = function() {
      img.style.position = "absolute";
      img.style.width = "90%";
      img.style.top = "30%";
      img.style.height = "40%";
      img.style.left = "10%";
    };;
    div.appendChild(img);
  };
}