Styjun

I use accordion in which i use table. In table i get different locations in it. I write a script to re order the location. In Some accordion the locations is same so if i reorder the location in one accordion that changes the all accordion that have same locations. i want if i reorder the location in one accordion it only change in that accordion not in other accordion which have same locations in it. Please help me. Here is my code.

Here is the code of Script:

<script>
 var fixHelperModified = function(e, tr) 
 var $originals = tr.children();
 var $helper = tr.clone();
 // console.log($helper)
 $helper.children().each(function(index) 
 $(this).width($originals.eq(index).width())
 );
 return $helper;
 ,
 updateIndex = function(e, ui) 
 $('td.index', ui.item.parent()).each(function (i) 
 $(this).html(i + 1);
 );
 ;

 $("#sort tbody").sortable(
 helper: fixHelperModified,
 stop: updateIndex,
 update: function(event, ui) 
 var list_sortable = $(this).sortable('toArray').toString();
 // change order in the database using Ajax
 $.ajax(
 url: 'url('admin/locations/updateOrder')',
 type: 'POST',
 data: list_order:list_sortable,_token:'csrf_token()',
 success: function(data) 
 //finished
 
 );
 
 );
</script>

Here is the code of my index.blade.php

 @extends('admin.layout')

 @section('css')
 <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3- 
 editable/css/bootstrap-editable.css" rel="stylesheet"/>
 <link rel="stylesheet" href 
 ="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
 <link rel="stylesheet" href ="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css ">
@endsection

@section('content')
<h1 class="page-header">Locations page</h1>

<div class="clearfix">
 <div class="pull-right" style="margin-bottom: 5px">
 <a href=" route('locations.create') " class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i> Create Location</a>
 </div>
</div>

@if(count($trails) > 0)
<div class="panel-group" id="accordion" style="margin-top: 10px;">
 <?php $count = 0;?>
 @foreach($trails as $getTrail)
 <div class="panel panel-default">
 <div class="panel-heading">
 <a data-toggle="collapse" data-parent="#accordion" href="#collapse$getTrail->trail_id" style="text-decoration: none !important;">
 <h4 class="panel-title">
 <span>
 ++$count:
 </span>
 ucwords($getTrail->trail_title)
 <span class="label bg-primary pull-right" style="padding-top: 3px;">
 Total Locations: count($getTrail->location)
 </span>
 </h4>
 </a>
 </div>
 <div id="collapse$getTrail->trail_id" class="panel-collapse collapse @if($count == 1) in @endif">
 <div class="panel-body">
 <div class="table-responsive">
 <table id="sort" class="example table table-striped dt-responsive" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Rewards Points</th>
 <th>Map options</th>
 <th>Created At</th>
 <th>Updated At</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 @foreach($getTrail->location as $location)
 <tr id=" $location->id " style="cursor: move;">
 <td> $location->id </td>
 <td>
 $location->title <br>
 <a href=" route('locations.hints', ['id' => $location->id]) " class="btn btn-primary" style="margin-top: 5px">Location Hints</a>
 </td>
 <td> $location->rewards_points </td>
 <td> $location->latitude $location->longitude ,<br/>radius: $location->radius </td>
 <td> $location->created_at->date </td>
 -- <td> $location->location_order </td>--
 <td> $location->updated_at->date </td>
 <td>
 <a title=" $location->title " href=" route('locations.show', ['id' => $location->id]) ">
 <i class="fa fa-eye" aria-hidden="true"></i>
 </a>
 <a title=" $location->title " href=" route('locations.edit', ['id' => $location->id]) ">
 <i class="fa fa-pencil" aria-hidden="true"></i>
 </a>
 <a href="#" data-toggle="modal" data-target="#mySmallModalLabel $location->id " data-location=" $location->id ">
 <i class="fa fa-trash" aria-hidden="true"></i>
 </a>
 <div class="modal fade small_modal_delete" tabindex="-1" role="dialog" id="mySmallModalLabel $location->id ">
 <div class="modal-dialog modal-sm">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 <h4 class="modal-title" id="myModalLabel">Deleting the location</h4>
 </div>
 <div class="modal-body">
 Are you sure want to delete this location?
 <form action="url('admin/locations/'.$location->id)" method="POST">
 <input name="_method" type="hidden" value="DELETE" />
 csrf_field() 
 <button class="btn btn-default" type="submit">Delete</button>
 </form>
 </div>
 </div>
 </div>
 </div>
 </td>
 </tr>
 @endforeach
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </div>
 @endforeach
</div>
@else
 <div class="col-lg-12 alert alert-warning" style="margin-top: 10px;">
 No Locations found
 </div>
@endif

Here is the code of controller

public function updateOrder()
 // get the list of items id separated by cama (,)
 $list_order = $_POST['list_order'];

 // convert the string list to an array
 $list = explode(',' , $list_order);
 $i = 1 ;
 foreach($list as $id) 
 Location::whereId($id)->update(['location_order'=>$i]);
 $i++ ;