javascript - Problems with adding input field to div -

i tried add input field, , label card (the user add card via button). didn't succeed. instead of adding these input field card, put them on in-box list. can me solve problem?

fiddle

$('document').ready(function () {      $('#addcardbtn').click(function () {          var numberofdiv = [100];          with(document) {             var newdiv = createelement('div');              var div = getelementbyid('useraddeddiv').appendchild(newdiv);              (var = 0; < numberofdiv; i++) {                 numberofdiv[i] = div;             }         }     });      $(function () {          $('#useraddeddiv').sortable({             containment: 'document',             cursor: 'crosshair',             opacity: '0.70',             connectwith: '#onholdlist',             hoverclass: '.border'         });          $('#onholdlist').sortable({             containment: 'document',             cursor: 'crosshair',             opacity: '0.70',             connectwith: '#useraddeddiv',             hoverclass: '.border'         });     });  }); 

---

update

i modified code set string value, in text field. value comes form dialog window. works fine. issue is, when add new card in-box list, , want set new string value on it. works well. @ same time same string value gets added first card. can try add card, , test it. have demo: http://jsfiddle.net/adit/xmk53/4/

jquery:

$('document').ready(function () {     // click function add card     $('#addcardbtn').click(function () {         // array of card         var numberofcards = [100];               // create new card             var $div = $('<div />').addclass('sortable-div');             $('#useraddedcard').append($div);              $('<label>title</label>').appendto($div);                           $('#getbtn').click(function () {                 $('<input/>', { "type": "text", "value": $("#customtextbox").val() }).appendto($div);                 $('<input/>', { "type": "text", "value": $("#datepicker").val() }).appendto($div);             });                 // sort cards in array             (var = 0; < numberofcards; i++) {                 numberofcards[i] = $div.clone(true);             }      });    

live demo

$(function () {     // click function add card     var $div = $('<div />').addclass('sortable-div');      $('<label>title</label><br/>').appendto($div);                   $('<input/>', { "type": "text","class":"ctb"}).appendto($div);     $('<input/>', { "type": "text","class":"date"}).appendto($div);     var cnt =0,$currenttarget;     $('#addcardbtn').click(function () {       var $newdiv = $div.clone(true);       cnt++;         $newdiv.prop("id","div"+cnt);         $('#useraddedcard').append($newdiv); //      alert($('#useraddedcard').find("div.sortable-div").length);             });      // double click open modal dialog window     $('#useraddedcard').dblclick(function (e) {         $currenttarget = $(e.target);          $('#modaldialog').dialog({             modal: true,             height: 600,             width: 500,             position: 'center'         });         return false;      });     $("#datepicker").datepicker({showweek:true, firstday:1});      $("#getbtn").on("click",function() {       var val=$("#customtextbox").val(),           date=$("#datepicker").val();       $currenttarget.find(".ctb").val(val);       $currenttarget.find(".date").val(date);       $('#modaldialog').dialog("close");     }); });