@foreach ($districts as $key => $dis)
  <li>
  	<a href="#" data-id="{{$dis->id}}" class="dis">{{$dis->name}} {{$dis->bn_name}}</a>
  	<a data-toggle="modal" data-target="#editDis" href="#" data-id="{{$dis->id}}" class="float-right editDis"><i class="fa fa-edit"></i></a>
  </li>

<div class="modal fade" id="editDis" role="dialog">
  <div class="modal-dialog">
  
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit district</h4>
      </div>
      <div class="modal-body">
        <div class="dis_edit"></div>
      </div>
    </div>
  </div>
</div>

@endforeach

<script type="text/javascript">
	$(function(){
	    $('.dis').on('click',function(){
	        $.ajax({
	            type:'get', url: '/common/dis-id-sub-districts-li',
	            data: {id: $(this).data('id')},
	            success: function (response) { $('.dis_result').html(response);},
	            error: function () {
	                $('.dis_result').html('<option value="">No data found</option>');
	            },
	        });
	    })

	    $('.editDis').on('click',function(){
        $.ajax({
            type:'get', url: '/common/dis-edit-form',
            data: {id: $(this).data('id')},
            success: function (response) { $('.dis_edit').html(response);},
        });
    });

	})
</script>