Problem with click event

Problem with click event

I have this function (posted below), and when executes for the first time it works just fine. But when i select, another div of the same class, to do the same with it, it executes for that div, and for the previous one too!..
And the canvas stays active, so, when i click it, it refreshes the input again!..And makes another circle..

I dont want this to happen. How could i do?...

$(".point_wrapper").click(function(event){
 
 $(this).css({background : '#000'});
var id = $(this).attr("id");
 var nombre=$(this);
 
 $("#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 puntox=id+"x";
    var puntoy=id+"y";
 
 
 //This works...
document.getElementById(puntox).value=x;
document.getElementById(puntoy).value=y;
        // $(puntox).val(x);
//$(puntoy).val(y);
var drawingCanvas = document.getElementById('canvas');
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
context.arc(y,x,10,0,360);
context.fill();
}
   nombre.css({background : '#333'});
    });