title: Sort and Save table data using jquery sortable
body: <p>Hi I am trying to set up a table with parent and child data which can be sorted by using the jquery sortable library, I am able to get the position and the respective ids of the data but unable to send the to the controller using jquery</p>
  <p>HTML Part:</p>
  <pre><code>&lt;tbody class=&quot;sort&quot;&gt;
                        @foreach($menus as $menu)
                          &lt;tr id = &quot;{{ $menu-&gt;id }}&quot; class=&quot;parent&quot;&gt;
                              &lt;td&gt;{{$menu-&gt;name}}&lt;/td&gt;
                              &lt;td&gt;{{ $menu-&gt;link }}&lt;/td&gt;
                              @if($menu-&gt;sub == 1)
                              &lt;td&gt;Active&lt;/td&gt;
                              @else
                              &lt;td&gt;In-Active&lt;/td&gt;
                              @endif
                              &lt;td class=&quot;text-right&quot; &gt;
                                  &lt;a href=&quot;{{ route(&quot;menu.edit&quot;, $menu-&gt;id) }}&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Edit&quot;&gt;&lt;i class=&quot;fe-edit-2&quot; &gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;button data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; data-id=&quot;{{$menu-&gt;id}}&quot; title=&quot;&quot; data-original-title=&quot;Delete&quot; class=&quot;delete btn btn-danger ml-1 &quot;  type=&quot;submit&quot;&gt;&lt;i class=&quot;fas fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/button&gt;        
                              &lt;/td&gt;
                              @if(count(App\Menu::where('parent_id',$menu-&gt;id)-&gt;orderBy('position','asc')-&gt;get())&gt;0)
                                  @foreach(App\Menu::where('parent_id',$menu-&gt;id)-&gt;orderBy('position','asc')-&gt;get() as $child)
                                      &lt;tr id=&quot;{{ $child-&gt;id }}&quot;&gt;
                                          &lt;td&gt;~{{$child-&gt;name}}&lt;/td&gt;
                                          &lt;td&gt;{{ $child-&gt;link }}&lt;/td&gt;
                                          &lt;td&gt;&lt;/td&gt;
                                          &lt;td class=&quot;text-right&quot; &gt;
                                              &lt;a href=&quot;{{ route(&quot;menu.edit&quot;, $child-&gt;id) }}&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Edit&quot;&gt;&lt;i class=&quot;fe-edit-2&quot; &gt;&lt;/i&gt;&lt;/a&gt;
                                                  &lt;button data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; data-id=&quot;{{$child-&gt;id}}&quot; title=&quot;&quot; data-original-title=&quot;Delete&quot; class=&quot;delete btn btn-danger ml-1 &quot;  type=&quot;submit&quot;&gt;&lt;i class=&quot;fas fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/button&gt;        
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  @endforeach
                              @endif
                          &lt;/tr&gt;
                        @endforeach
                      &lt;/tbody&gt;
  </code></pre>
  <p>Jquery part:</p>
  <pre><code>$(document).ready(function(){
          $('.sort').sortable({
              stop:function(event, ui){
                  var parameter = new Array();
                  var position = new Array();
                  $('.sort&gt;tr').each(function(){
                      parameter.push($(this).attr(&quot;id&quot;));
                  });
                  $(this).children().each(function(index) {
                      position.push(index + 1);
                  });
              
                  $.ajax({
                      url:&quot;{{ route('menu.savePosition') }}&quot;,
                      method:&quot;POST&quot;,
                      data:{&quot;id&quot;:parameter,&quot;position&quot;:position},
                      success:function(response){
                          console.log(response);
                      },
                      error:function(xhr,response){
                          console.log(xhr.status);
                      }
                  });
              },
  
          }).disableSelection();
  });
  </code></pre>
  <p>Controller Part:</p>
  <pre><code>public function SavePosition(Request $req){
          $position = ($req-&gt;all());
          return $req-&gt;all();
          // foreach($file as $pos){
          //     $id = $pos[1];
          //     $position = $pos[0];
          //     $menu = Menu::findOrFail($id);
          //     $menu-&gt;position = $position;
          //     $menu-&gt;save();
          // }
  
      }
  </code></pre>
  <p>After all this the console looks like the following :
  <a href="https://i.stack.imgur.com/RHtgX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RHtgX.png" alt="enter image description here" /></a></p>
  <p>please help me out fixing the issue</p>
  <p>any help would be highly appreciated</p>
  <p>Thanks in advance</p>