resizable and draggable do not work on items added later

Question

I’m using draggable and resizable of jQuery UI to box the user can change the dimension and move. It is working properly if I put the <div> right in the code:

<form action="" method="post" class="form row" enctype="multipart/form-data">
  <div class="form-group col-12">
    <img src="URL da imagem" />

    <div id="boxEu" style="width:150px;height:150px;">
        <span class="close-box" ref="1" id="box1">X</span>
        <div class="clearfix"></div>
        <p>Box 1</p>
    </div>

  </div>
</form>

But what I’m trying to do is for the user to click a button and add as many Boxes as they want, so I made the code:

HTML:

<form action="" method="post" class="form row" enctype="multipart/form-data">
  <div class="form-group col-12">
    <img src="URL da Foto" />

    <div class="blocos"></div>

  </div>
</form>

jQuery

var zIndexUser = 1;

$("button#addUser").click(function(){

    var html  = '<div id="boxEu" style="z-index:'+zIndexUser+';width:150px;height:150px;top:'+(zIndexUser * 10)+'px;left:'+(zIndexUser * 10)+'px;">';
        html += '<span class="close-box">X</span>';
        html += '<div class="clearfix"></div>';
        html += '<p><b>Foto '+zIndexUser+'</b> do Testador</p>';
        html += '</div>';

    $(".blocos").append(html);

    zIndexUser++;
});

It adds correctly, but the function of moving and resizing the element does not work, as these items were added later. What I need is to make the function below work also in these new items that the user keeps adding:

jQuery UI code:

$( function() {
    $( "div#boxEu" ).resizable({
        stop : function(event,ui) {
           $("#inputEuWidth").val(ui.size.width);
           $("#inputEuHeight").val(ui.size.width);
        }
    }).draggable({
        drag : function(event,ui) {

            $("#inputEuLeft").val(ui.position.left);
            $("#inputEuTop").val(ui.position.top);
        },
        containment: '.form-group'
    });
});