Jquery UI Sortable with Accordion: Save sort order

accordion.js

scmAcco.accordion({
  header: "> div > h3",
  collapsible: true,
  active: false,
  heightStyle: "content",
}).sortable({

  update: function(event, ui) {
    //On update get new order of elements as an array
    var serialized = $(this).sortable("toArray", {
      attribute: "data-originalIndex"
    }).join();
    //you will get result like 1,0,3
    //Now split result string and result will become indexed array 
    var menuOrdrArray = serialized.split(',')
    console.log('serialize', serialized, 'menuOrdrArray', menuOrdrArray);
    //Now iterate over generated array and set hidden field value   
    _.each(menuOrdrArray, function(newOrder, key) {
      self.$el.find('input[name="scmw__menus[' + key + '][scmw__display_order]"]').val(newOrder);
    });
  }
});

menu.hbs

<div id="menu-{{index}}" class="group menu" data-originalIndex="{{index}}" data-displayOrder="{{displayOrder}}">
  <h3 class="scmw-heading ui-state-default">
    {{title}}
  </h3>
  <div class="scmw-content">
    <div class="control-group">
      <div class="controls">
        <label class="control-label">Title</label>
        <input type="text" name="scmw__menus[{{index}}][scmw__title]" class="input-block-level scmw-menu-title" value="{{title}}" placeholder="{{title}}">
      </div>
    </div>
    ...
    <div class="control-group">
      <div class="controls">
        <a type="button" class="scm-delete-menu btn btn-link">Delete</a>
        <button type="button" class="scm-save-menu btn btn-primary">Save Menu</button>
      </div>
    </div>
    <input type="hidden" name="scmw__menus[{{index}}][scmw__display_order]" value="{{displayOrder}}">
  </div>
  <!-- ./scmw-content -->
</div>
<!-- ./menu -->