How to remove dynamicaly created object jQuery UI

Question

I work with jQuery UI dragable and resizable object.

Here u can see example

As u can see at top i have 2 inputs at which user add some Width and Height parameters, after clicking ob button Add area user can see new area at the view.

In hover i add remove button, but this button not vorking as aspect. First object this button deleted, but if user add few object and for example want to remove object #3 it's not deleting.

I try few method to delete object but it's not working.

For now i use this method to deleting:

$(document).on("mouseover", function(event) {
  console.log('#' + event.target.id + '')
  $('#' + event.target.id + '').find("#delete-area").toggleClass("hide")
  $('#' + event.target.id + '').find("#delete-area").toggleClass("gg-remove")
  $("#delete-area").click(function() {
    $('#' + event.target.id + '').parent().remove();
  });
});

But this deleting all view from page.