javascript - Access newly created DOM elements for looping -

i'm using jquery sortable + jquery draggable put page adds , removes images slideshow. have set such can drag in new screens , drop them named sequences want, , it'll create dom elements need.

i scanning page necessary elements , committing them array, never picks newly added items. example, have following elements begin with:

<h3 data-sequence-title="sequence1">sequence 1</h3> <ul class="sortable connectedsortable ui-sortable">     <li data-screen="screen1">screen 1</li>     <li data-screen="screen2">screen 2</li>     <li data-screen="screen3">screen 3</li> </ul> 

...and add row:

<h3 data-sequence-title="sequence1">sequence 1</h3> <ul class="sortable connectedsortable ui-sortable">     <li data-screen="screen1">screen 1</li>     <li data-screen="screen2">screen 2</li>     <li data-screen="screen3">screen 3</li>     <li data-screen="screen4">screen 4</li> </ul> 

jquery ever return first elements, not updated ones. here's js i'm using:

$( document.body ).on('click', '.submit', function(){      // build nested array dom elements     var jsonobj = [];          $('.sortable').prev('h3').each(function(){         var obj = {             title: $(this).data("sequence-title"),             screens: []         };          $(this).next("ul").children('li').each(function() {           obj.screens.push({               image: $(this).data("screen")           });         });          jsonobj.push(obj);     });  }); 

code adds new lis:

// initialize draggable / droppable functionality $('.sortable').sortable({     placeholder: 'ui-state-highlight',     revert: true }); $('.draggable li').draggable({     connecttosortable: '.sortable',     helper: 'clone',     revert: 'invalid' }); $('.sortable').disableselection(); 

i need return modified dom, not elements there when loaded page.

after add element sortable have update component:

$(".sortable").sortable("refresh");