Select with editable-select class not work on appending - ajax

Question

I have a select option that will populate options with the help of ajax and jsonencode. My code works fine, however if I add a class editable-select, which is super helpful in my project, append doesn't work.
here is my code without editable select, working fine
<select name="UM" id="UM" class="form-control" required></select>
and here is when I add a class editable-select
<select name="UM" id="UM" class="form-control editable-select" required></select>
and below is my ajax to populate
$('#UM').on('click',function(e){
$.ajax({
url: '/Files/populate_units',
type: 'get',
success:function(response){
var data = $.parseJSON(response);
var len = data.length;
$("#UM").empty();
for( var i = 0; i<len; i++){
var um = data[i]['UM'];
$("#UM").append("<option value='"+um+"'>"+um+"</option>");
}
}
});
});
below is my code for getting the values from database, this is working fine
public function PopulateUnits(Request $request){
$units = Units::all();
$um = [];
foreach($units as $unit){
$um[] = [
'id' => $unit->id,
'UM' => $unit->UM,
];
}
echo json_encode($um);
}
does the class editable-select has something to do why .append doesn't work ? because if I remove them the encoded json works fine and append perfectly on my select option. pls help me, thanks