I have 20 divs,(class point_wrapper) when i click on it, happens what follows:

$(".point_wrapper").click(function(event){

$(this).css({background : '#000'});

var id = $(this).attr("id");

  var nombre=$(this);

  var t='#'+id+'x';

  var u='#'+id+'y';

 

  $("#canvas").click(function(event){

    var x, y;

  var posicion=$("#canvas").position();

    x =Math.round(event.pageY-posicion.top);

    y = Math.round(event.pageX-posicion.left);

var drawingCanvas = document.getElementById('canvas');

if(drawingCanvas && drawingCanvas.getContext) {

var context = drawingCanvas.getContext('2d');

context.arc(y,x,10,0,360);

context.fill();

}

 

 

  $(t).val(x);

  $(u).val(y);

  });

 

 });

It works ok, but, without refreshing i click, another one, it executes for both, refreshes both inputs, and, if a click a third, it does for all...

Whats the problem?... I would apreciate an answer. Sorry for my english.

Thanks!