Drag & Drop AJAX

Question

I have the following codes

INDEX.PHP

             <section class="content">
                <div class="row">
                <div class="col-md-6">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <a href="javascript:void(0);" class="btn btn-danger outlined mleft_no reorder_link" id="save_reorder">Reordenar</a>              
                    <div id="reorder-helper" class="light_box alert alert-danger" style="display:none;" role="alert"><h6>Reordenação Liberada</h6></div>                  
                  </div>
                  <div class="panel-body">
                    <ul id="sortable" class="list-group">                
                        <?php 
                            echo $auth_task->select();
                        ?>
                    </ul>
                  </div>
                  <div class="panel-footer">Panel footer</div>
                </div><!-- <div class="panel panel-default"> -->                
                </div><!-- <div class="col-md-6"> -->                   

                </div>  <!-- <div class="row"> -->              
            </section><!-- <section class="content"> -->

SCRIPT.JS

    $(function() {
    $('.reorder_task').on('click',function(){       
        $('.reorder_task').html('Salvar');
        $('.reorder_task').attr("id","save_reorder");
        $('#reorder-helper').slideDown('slow');         
        $('#sortable').sortable({           
            axis: 'y',
            opacity: 0.7,
            handle: 'span',
            update: function(event, ui) { 

                var list_sortable = $(this).sortable('toArray').toString();            

        $("#save_reorder").click(function( e ){         
            if( !$("#save_reorder i").length )
            {   
                $(this).html('').prepend('<i class=\"fa fa-spinner fa-spin fa-fw\"></i><span class=\"sr-only\">Loading...</span>').removeClass('btn-danger');
                $("#sortable").sortable('destroy');
                $("#reorder-helper").html( "<h6>Salvando</h6>");                

                var list_task = [];
                var list_array = [list_sortable];

                $.each( list_array, function( index, value ){
                    list_task += value;
                });

                console.log(list_task);         
                $.ajax({
                    url: './task.php',
                    type: 'POST',                
                    data: {list_order: list_task },
                    success: function(data) {                       
                             window.location.reload();                                      
                    }
                });//End Ajax                
                return false;
            }//End If   
            e.preventDefault();
        });// End Click     
            } //End Update              
        });//End Sortable      
    });// End Onclick 
});

This code is for task reordering, when clicking and Reordering it releases the TAG li for modification (drag & drop), I can drag and click on Save to send a POST via AJAX to the bank and it’s all right.

But the main I can’t reorder several at once I can reorder one at a time, if I sort item 1 and then item 2, it will only save the order of the first.

Does anyone have any idea what I can do, to reorder several at the same time?

I modified the code a little bit

I put that part:

var list_task = [];
            var list_array = [list_sortable];

            $.each( list_array, function( index, value ){
                list_task += value;
            });

When it shows on the console it takes the order of the task and shows 1, 2, 3... can change to 3 , 1, 2... and so on, but if I make more than one modification it does not send, {3, 1, 2...}, {2, 3, 1...}.