resizable and draggable do not work on items added later

I am using draggable and resizable of jQuery UI to box so user can change dimension and move. It is working correctly if I put the <div> direct 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 that the user clicks a button and adds as many Boxes as I 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 move and resize function does not work because those items were added later. What I need is to make the function below work also on these new items that the user will add:

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'
    });
});