After dynamically adding jquery sortable element drag and resize the element and get the positions in jquery

Question

I have successfully added the dynamic element but its sortable i want the added dynamic element should be dragable and resizable.

I have copied the working demo from here . I just want to save the top, left, height and width pixel values of the added elements which the user will add. I have tried several methods but that didn't help me.

/* didn't worked */
$(".new_element_class").draggable({
  cursor: "move",
  drag : function(event, ui){
    $('#for_drag').html('Dragging Element! left : ' + Math.floor(ui.position.left) + 'Top : ' + Math.floor(ui.position.top));
   }
});
$('.new_element_class').resizable({
   handles : "n,s,w,e,ne,se,sw,nw",
   // maxHeight : 90,
   // maxWidth : 215,
   minWidth : 215,
   minHeight : 30,
   helper: "ui-resizable-helper",
   animate: true,
   start : function(event, ui){
      $('#for_resize').html('Resizeing Element! Width :  ' + Math.floor(ui.size.width) + ' Height : ' + Math.floor(ui.size.height));
   },
   stop : function(event, ui){
      $('#for_resize').html('Resizeing Element! Width :  ' + Math.floor(ui.size.width) + ' Height : ' + Math.floor(ui.size.height));
   },
   resize : function(event, ui){
      $('#for_resize').html('Resizeing Element! Width :  ' + Math.floor(ui.size.width) + ' Height : ' + Math.floor(ui.size.height));
   },
});
/* didn't worked */

Also, I want to add more options dynamically for select box, radio button and checkbox with dynamic content like values and innerHTML. I have tried jquery and javascript methods for select box input field only but its adding in the first element,

Eg: if I added two select box input and i want to add some more options for the second select box, It's adding for the first one.

I tried this Jquery code

var select_id = "#select_name_"+rand_no;
var option_id = "#option_adder"+rand_no;
$(select_id).live('click', function(){
    name = $(this).text();
    if($("#" + name).length == 0) {
       $(option_id).click(function(){
           $(select_id)
           .find('option')
           .end()
           .append('<option value="whatever">text</option>')
           .val('whatever');
       });
    } else {
       alert('this record already exists');
    }
});

And I also tried this Javascript code

var select_id = "select_name_"+rand_no; // for javascript
var option_id = "option_adder"+rand_no; // for javascript

var min1 = 0,
    min2 = 0,
    max = 100,
    select_id_obj = document.getElementById(select_id),
    option_id_obj = document.getElementById(option_id);

function dataadder(id){
    if(id == option_id_obj){
        min1++;
        var opt = document.createElement('option');
        alert(opt);
        opt.value = 'data is '+min1;
        opt.innerHTML = 'data is '+min1;

        select_id_obj.appendChild(opt);
    }
}

Here is my fiddle code.

Can some one help me with this??