javascript - deepclone affected only on the last iteration in loop -

i trying clone select handler within loop,

but handler binds clone in last iteration.

this html of select

<select class="usertype" id="<?...?>">  <option>o1</option>  <option>o2</option>  <option selected>o3</option> </select> 

this js

var usertype = $('.usertype'); usertype.change(function(){  console.log(1); }); $('#okbtn').click(function(){   // obj.data json getting ajax result.   var selectraw = $(usertype).first();  searchresult.html('');  for(var value in obj.data){   searchresult.html(searchresult.html()+'<div id="userresult'+obj.data[value].id+'">'+obj.data[value].name+' - '+obj.data[value].email+' </div>');   selectraw.clone(true, true).appendto('#userresult'+obj.data[value].id).attr('id', obj.data[value].id).children().attr('selected', false);  } }); 

ok strange. change way insert div before clone , works now!

i change .html():

searchresult.html(searchresult.html()+'<div id="userresult'+obj.data[value].id+'">'+obj.data[value].name+' - '+obj.data[value].email+' </div>'); 

to append().

searchresult.append('<div id="userresult'+obj.data[value].id+'">'+obj.data[value].name+' - '+obj.data[value].email+' </div>'); 

someone can logical explanation this?