make resizable a dynamically add div

Question

I have a div called content

<div id="content">
</div>

I have another div call instruments

<div id="instruments">

</div>

When I click on an instrument it has to added to a div called content. I have done this job. But I need to the moved div (instrument) is resizable. I have tried using jquery-ui.js but it failed. what am i going to do? the script is bellow

<script>
var steps_array = [];
$(".instruments").one("click", function(){
        $("#content").append($(this));
        $(this).css({"position":"relative", "top":"10px"});
        $(this).addClass('resizable');

    steps_array.push({
        id : $(this).attr('id'),
        height: $(this).height(),
        width: $(this).width(),
        positionX: $(this).position().left,
        positionY: $(this).position().top
    });

        $( this ).draggable({ 
            containment: "parent",
        drag: function() {
            $("#x-value").html($(this).position().top); 
            changePos ( $(this).attr('id'), $(this).position().left , $(this).position().top );
            console.log("Edited : "+$(this).attr('id'));

        }       
        });

$( ".resizable" ).resizable();    
    });


    $(".btn").click(function(){
        print_array_object(steps_array);
    });
        function print_array_object(array_name){
        $.each(array_name, function(index, val) {
            console.log(val.id);
            console.log(val.height);
            console.log(val.width);
            console.log(val.positionX);
            console.log(val.positionY);
        });
    }

    function changePos( id, newX , newY) {
       for (var i in steps_array) {
         if (steps_array[i].id == id) {
            steps_array[i].positionX = newX;
            steps_array[i].positionY = newY;
            break; //Stop this loop, we found it!
         }
       }
    }
    </script>

Answer 1

You have a syntax error in your javascript where you have .one() instead of .on() and you are using id="instruments"in your html when it should be class="instruments"

Also make sure you are linking to:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

var steps_array = [];
$(".instruments").on("click", function(){ //here you had ".one()" instead of .on()

 $("#content").append($(this));
 $(this).css({"position":"relative", "top":"10px"});
 $(this).addClass('resizable');

    steps_array.push({
        id : $(this).attr('id'),
        height: $(this).height(),
        width: $(this).width(),
        positionX: $(this).position().left,
        positionY: $(this).position().top
});

$( this ).draggable({ 
 containment: "parent",
 drag: function() {
 $("#x-value").html($(this).position().top); 
 changePos ( $(this).attr('id'), $(this).position().left , $(this).position().top );
 console.log("Edited : "+$(this).attr('id'));
 }  
 });

$( ".resizable" ).resizable();    
});


$(".btn").click(function(){
 print_array_object(steps_array);
});
function print_array_object(array_name){
 $.each(array_name, function(index, val) {
  console.log(val.id);
  console.log(val.height);
  console.log(val.width);
  console.log(val.positionX);
  console.log(val.positionY);
 });
}

function changePos(){
  //not sure what this does but added to avoid errors 
  }

#content{
   width:300px;
   height:300px;
  background-color:#cccccc;
  }

.instruments{
   width:50px;
   height:50px;
  background-color:#999999;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="content">
</div>

<div class="instruments"> <!-- here you were using an id instead of a class -->

</div>