jquery calls javascript function that duplicate value

jquery calls javascript function that duplicate value

Hi all,
I have this code to generate a list of img from a json array:
  1. $.each(arrf, function(idx, obj) {
  2.     var id = obj.id;
  3.     var tipo = 'foto';
  4.     var formato = tipo;
  5.     var tip="Metadati foto\ndata: "+obj.data+"\nUS: "+obj.us+"\nnote: "+obj.note+"\nClicca sulla foto per aprire la scheda completa";
  6.     var tavola = 'upload/doc_scavo/'+ obj.path_tavola;
  7.     var divFoto = $("<div/>").attr("id","divFoto"+obj.id).attr('class','divFoto');
  8.     $('.fotoContent').append(divFoto);
  9.     var i = $("<img/>")
  10.         .attr('id', 'foto'+obj.id)
  11.         .attr('class', 'modFoto')
  12.         .attr('src', tavola)
  13.         .attr('alt', obj.path_tavola)
  14.         .attr('title', tip)
  15.         .css({"width":"130px","height":"130px","cursor":"pointer"})
  16.         .load(function(){ $('#divFoto'+obj.id).append(i);})
  17.         .click(function() { updateForm(id,tipo,formato);  });
  18. });
I click on img to open a form and update img "metadata". A javascript function (updateForm) pulls data from a database and fill the form fields, then shows the form:
  1. function updateForm(id,tipo,formato){
  2.     $.ajax({
  3.         url: 'inc/docScavoUpdate.php',
  4.         type: 'POST',
  5.         data: {tipo:tipo,id:id},
  6.         dataType: "json",
  7.         success: function (data) {
  8.             $("form.updateForm input#idUp").val(data.id);
  9.             $("form.updateForm input#idScavoUp").val(data.id_scavo);
  10.             $("form.updateForm input#pathUp").val(data.path_tavola);
  11.             $("form.updateForm #dataUp").val(data.data);
  12.             $("form.updateForm #settoreUp").val(data.settore);
  13.             $("form.updateForm #areaUp").val(data.area);
  14.             $("form.updateForm #trinceaUp").val(data.trincea);
  15.             $("form.updateForm #saggioUp").val(data.saggio);
  16.             $("form.updateForm #usUp").val(data.us);
  17.             $("form.updateForm #autoreUp").val(data.autore);
  18.             $("form.updateForm #noteUp").val(data.note);
  19.             ....
  20.             ....
  21.             $("button[name=updateButton]").on("click",function(){updateRecord(id,tipo); });
  22.         }
  23.     });
  24.     $("#docWrap").fadeIn('fast');
  25. }
Html div that contains the form, has a button to hide the form:
  1. $(".lpCloseDiv").click(function(){
  2.       $(".dialogHtml").fadeOut(500);
  3. });
Clicking on "updateButton" I update the values with updateRecord function, and reload the page.
And now the problem!!!
If I open the form, update the values and click on updateButton, all works fine...but if I click on img with id 1, that opens the form, close the form without change any values (and so without reload the page), click on other img with id 2, change some values and click on updateButton, my function updates both img !!!
As if on each click my function adds the new id to an array!!!

Have you tips for me? 

-beppe-