diff --git a/themes/grav/templates/forms/fields/order/order.html.twig b/themes/grav/templates/forms/fields/order/order.html.twig
index d8cb52b6..03d9d4c2 100644
--- a/themes/grav/templates/forms/fields/order/order.html.twig
+++ b/themes/grav/templates/forms/fields/order/order.html.twig
@@ -15,7 +15,7 @@
     </div>
     <div class="form-data block size-2-3 pure-u-2-3">
         <div class="form-order-wrapper {{ field.size }}">
-            <input type="hidden" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value }}" />
+            <input type="hidden" data-order name="{{ (scope ~ field.name)|fieldName }}" value="{{ value }}" />
             <ul id="ordering" class="{{ field.classes }}">
                 {% for page in siblings %}
                 <li class="{% if page.order  == value %}drag-handle{% else %}ignore{% endif %}" data-id="{{ page.slug }}">{{ page.title() }}</li>
@@ -25,10 +25,16 @@
     </div>
     <script type="text/javascript" src="{{ theme_url }}/js/sortable.min.js"></script>
     <script>
-        var el = document.getElementById('ordering');
-        new Sortable(el, {
-            filter: ".ignore"
-            // draggable: ".drag-handle"
-        });   
+        jQuery(function(){
+            var el = jQuery('#ordering');
+            new Sortable(el[0], {
+                filter: ".ignore",
+                onUpdate: function(evt){
+                    var index = el.children().index(jQuery(evt.item)) + 1;
+                    jQuery('[data-order]').val(index);
+                }
+                // draggable: ".drag-handle"
+            });
+        });
     </script>
 </div>