jquery: как обновить идентификатор перетаскиваемого клона?

Я хочу добавить перетаскиваемые элементы в сортируемый список, Странно то, что следующий код обновляет идентификатор до «new-id» в объекте de ui (как я вижу в своей консоли), но идентификатор не изменяется на фактической странице html. У кого-нибудь есть решение?

$( "#init .block" ).draggable({
  helper: "clone",
  connectToSortable: ".list"
});

$(".list").sortable({
  connectWith: ".list",
  receive: function(event, ui) {
    $(ui.helper).attr("id","new-id");
    console.log(ui); 

    // surprisingly the next line works fine, but is not neccesary
    // $(ui.item).attr("id","new-id");
  }
});

<div id="init">
  <div id="new" class="block">Drag me</div>
  <div id="new" class="block">Drag me</div>
  <div id="new" class="block">Drag me</div>
</div>

<div class="list">
  <div class="block">Sort me</div>
  <div class="block">Sort me</div>
</div>