deepclone affected only on the last iteration in loop

Question

I am trying to clone Select with is handler within a loop,

but the handler binds only to the clone in the last iteration.

this is the html of the select

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

this is the JS

var userType = $('.userType');
userType.change(function(){
 console.log(1);
});
$('#okBtn').click(function(){

 // obj.data is Json getting from 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);
 }
});

Answer 1

OK this is strange. i change the way to insert the div before the clone and it works now!

I change it from .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 get logical explanation for this?