title: Reordering elements with jQuery sortable() and output correct order in PHP
body: <p>I have some elements that I have sorting on the screen. So you can drag and drop elements above and below each other to reorder them on the screen. What I need to do, is be able to save the order that these elements are in, and then on my PHP file, get the order of the elements, and echo the html out accordingly.</p>
  
  <p>I've been going around in circles trying to figure out the best way to do this, and can't seem to figure it out.</p>
  
  <p>I thought about saving values in hidden inputs that get changed when things are reordered, and then calling up all of the inputs's values on the PHP side and ordering them that way, but it seems super sloppy.</p>
  
  <p>Edit: here's my selector code... nothing gets logged out in <code>sorted</code>.</p>
  
  <pre><code>$( ".container" ).sortable({
              placeholder: "ui-state-highlight",
              handle: ".handle",
              update: function(e, ui) {
                  var sorted = $( ".container" ).sortable( "serialize" );
                  console.log(sorted);
                  //Ajax the data to the server
                  //$.get('sort.php', order, function(data, textStatus, xhr) {});
              }
  
      });
  </code></pre>
  
  <p>How I build out my template:</p>
  
  <pre><code>$template = "&lt;div class='title'&gt;title class&lt;/div&gt;";
  $template .= "&lt;div class='summary'&gt;summary class&lt;/div&gt;";
  $template .= "&lt;div class='rating'&gt;rating class&lt;/div&gt;";
  $template .= "&lt;div class='conclusion'&gt;conclusion class&lt;/div&gt;";
  </code></pre>
  
  <p>So if I have the order come back from sortable variable, how do I decide where and when to build my template out. The sortable variables return title, summary rating, conclusion in the order they were saved in.</p>