title: Update Div Hidden Field on jQuery Sortable Drag and Drop Update
body: <p>I am using an HTML5 jQuery Sortable library.  Not jQuery UI Sortable but this one here <a href="http://farhadi.ir/projects/html5sortable/" rel="nofollow">http://farhadi.ir/projects/html5sortable/</a></p>
  
  <p>I have used it on many projects in the past and generally I use AJAX to save the sort order as a string of ID's into a database field.</p>
  
  <p>On my current project, I need to do things completely different though.  I am not using AJAX to save the order this time.</p>
  
  <p>Basically I have the Sortable library running on a Form edit screen which will have a list of DIV's, inside these div's will be form fields.  At the bottom of the page is a save button that submits the form to save all the data on the page.  So I would like to instead store the sort order of each DIV into a hidden form field for each item.</p>
  
  <p>I have set up a demo to work with on CodePen.io here <a href="http://codepen.io/jasondavis/pen/ztirw?editors=101" rel="nofollow">http://codepen.io/jasondavis/pen/ztirw?editors=101</a></p>
  
  <p>I could use some help to update a Form filed under each Div to update the fields with the Sort order each time a Drop occurs.   So instead of saving a string of ID's in the correct sorted order, I would instead like to update every record on a Drop event into a Form filed with the current sort position.</p>
  
  <p>Any help please?</p>
  
  <p>The demo HTML structure looks like this...</p>
  
  <pre><code>&lt;div id="project_tasks" class="tasks_block sortable"&gt;
  
      &lt;div id="task_13" class="task_row"&gt;
          &lt;span class="handle"&gt;&lt;/span&gt;
          &lt;input name="taskid_13" id="taskid_13" size="15" type="text" value="taskID 1"&gt;
          &lt;input name="projectid_13" id="projectid_13" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34"&gt;
          Sort Order: &lt;input name="sort_order_19" id="sort_order_19" size="15" type="text" value="1"&gt;
          &lt;br style="clear:both;"&gt;
  
      &lt;/div&gt;
  
      &lt;div id="task_14" class="task_row"&gt;
          &lt;span class="handle"&gt;&lt;/span&gt;
          &lt;input name="taskid_14" id="taskid_14" size="15" type="text" value="taskID 2"&gt;
          &lt;input name="projectid_14" id="projectid_14" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34"&gt;
          Sort Order: &lt;input name="sort_order_19" id="sort_order_19" size="15" type="text" value="2"&gt;
          &lt;br style="clear:both;"&gt;
      &lt;/div&gt;
  
      &lt;div id="task_15" class="task_row"&gt;
          &lt;span class="handle"&gt;&lt;/span&gt;
          &lt;input name="taskid_15" id="taskid_15" size="15" type="text" value="taskID 3"&gt;
          &lt;input name="projectid_15" id="projectid_15" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34"&gt;
          Sort Order: &lt;input name="sort_order_19" id="sort_order_19" size="15" type="text" value="3"&gt;
          &lt;br style="clear:both;"&gt;
      &lt;/div&gt;
  
  
      &lt;div id="task_15" class="task_row taskheading"&gt;
          &lt;span class="handle"&gt;&lt;/span&gt;
          &lt;h2&gt;List Heading 1&lt;/h2&gt;
          Sort Order: &lt;input name="sort_order_19" id="sort_order_19" size="15" type="text" value="4"&gt;
          &lt;br style="clear:both;"&gt;
      &lt;/div&gt;  
  
  
  
      &lt;div id="task_16" class="task_row"&gt;
          &lt;span class="handle"&gt;&lt;/span&gt;
          &lt;input name="taskid_16" id="taskid_16" size="15" type="text" value="taskID 4"&gt;
          &lt;input name="projectid_16" id="projectid_16" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34"&gt;
          Sort Order: &lt;input name="sort_order_19" id="sort_order_19" size="15" type="text" value="5"&gt;
          &lt;br style="clear:both;"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>A little JavaScript to start things off...</p>
  
  <pre><code>$( document ).ready(function() {
  
      $('#project_tasks').sortable({
          handle: '.handle',
          onStartDrag: function() {},
          onEndDrag: function() {},
          onChangeOrder: function() {}
      }).bind('sortupdate', function() {
  
  
          $('.sortable div').each(function() {
  
              // Update a HIDDEN Field under each DIV with the current sort order
              // So when my Form is submitted/saved, it can save the sort order for
              // each record into the database.
  
          });
      });
  
  });
  </code></pre>