create an image dynamically with an event handler

create an image dynamically with an event handler

I'm trying to have my jquery/javascript code do the following: 
1. create an image,
 2. add it to a div, 
3. add an ONCLICK event handler, and 
4 do it again multiple times, at different positions in the div.

The images are actually red dots, and I'm trying to mark various vertical spots in the webpage as worthy of emphasis, using these red dots.
So to do this I assume the position of the images have to be 'absolute' and that I can find where they should go knowing where the outer div is - in other words where the left position and the top position is.  My first attempt is below.   The problem with it is that it only displays one image, even if you call it several times with different parameters.  It also does not try to add an 'onclick' event to the image.  I also tried a different way of setting the id (imgdoc.id=....) but that doesn't solve the problem, which is that only one image gets shown in the div.  Any help is appreciated.: 

  1. // +++++++++++++
    function createImage(index, y) {
    var x = $("#divDots").offset().left;
    var img = new Image(15, 14); // width, height values are optional params
    var theid = 'ci' + index;
    img.setAttribute('id', theid);
    img.src = '/images/dothp.png';
    var imgdoc = document.getElementById("divDots").appendChild(img);
    imgdoc.style.position = 'absolute';
    imgdoc.style.left = x + 'px';
    imgdoc.style.top = y + 'px';
    }