List of films to randomly display in a sortable list

I have a sortable list, within this function I also have some code to display the list in a random order, however this seems to have stopped working, can anyone see why the random list is not working, ive been looking for hours now and cant work it out.

HTML

<div class="col-md-5">
            <ul id="new_fields" class="updownrow">
                <li id="field_id_1"  class="ui-state-default border-roundFirst border border-secondary">The Abyss <span class="updownbtn movetop fa fa-angle-double-up"></span><span class="float-right"><a href="">down</a> <a href="">up</a></span> </li>
                <li id="field_id_2"  class="ui-state-default border-round border border-secondary">Aliens <span class="updownbtn movetop fa fa-angle-double-up"></span><span class="float-right up"> <a href="">down</a> <a href="">up</a></span></li>
                <li id="field_id_3"  class="ui-state-default border-round border border-secondary">The Terminator <span class="updownbtn movetop fa fa-angle-double-up"></span><span class="float-right"><a href="">down</a> <a href="">up</a></span></li>
                <li id="field_id_4"  class="ui-state-default border-round border border-secondary">Terminator 2: Judgement Day <span class="updownbtn movetop fa fa-angle-double-up"></span><span class="float-right"><a href="">down</a> <a href="">up</a></span></li>
                <li id="field_id_5"  class="ui-state-default border-round border border-secondary">Avatar <span class="updownbtn movetop fa fa-angle-double-up"></span><span class="float-right"><a href="">down</a> <a href="">up</a></span></li>
                <li id="field_id_6"  class="ui-state-default border-round border border-secondary">Titanic <span class="updownbtn movetop fa fa-angle-double-up"></span><span class="float-right"><a href="">down</a> <a href="">up</a></span></li>
                <li id="field_id_7"  class="ui-state-default border-round border border-secondary">Piranha II: The Spawning <span class="updownbtn movetop fa fa-angle-double-up"></span><span class="float-right"><a href="">down</a> <a href="">up</a></span></li>
            </ul>
        </div>

JS

function sortable () {
        jQuery("#new_fields").sortable({
            cursor: 'move',
            // post
            update: function () {
                var order = jQuery('#new_fields').sortable('serialize');
                jQuery.ajax({
                    type: "POST",
                    url: "<?php filmlist( 'url' ); ?>/wp-admin/admin-ajax.php",
                    data: "action=update_field_order&" + order
                });
            }
        });
        jQuery("#new_fields").disableSelection();

        var ul = document.querySelector('ul');
        for (var i = ul.children.length; i >= 0; i--) {
            ul.appendChild(ul.children[Math.random() * i]);
        }

        lists = document.getElementsByClassName('ui-state-default');
        x = [];
        for (var i = 0, im = lists.length; im > i; i++) {
            x[i] = lists[i].id;
            console.log(x);
        }
    },