Ajax send same value but different options in dropdown list

I have a users' data table and im trying to change role of them by populating roles from database to datatable. I use ajax to change the role and it works. but problem is value of selecting option from dropdown is not sent to database.

Herewith I attached my controller function view and ajax code. Please advise me to solve this.

Controller:

public function changeRole(Request $request){
    $id = Input::get('id');
    $isAdmin = Input::get('isAdmin');
    User::findOrFail($id)->update(['isAdmin'=>$isAdmin]);
}

Ajax :

$(document).ready(function(){
$('select').on('change' , function (event){
 id = $(this).data('id');
isAdmin = $('#role').val();
//alert(role);
$.ajax({
    type: 'POST',
    url: SITE_URL + '/changeRole/',

    data: {
        '_token': $('input[name=_token]').val(),
        'id': id,
        'isAdmin': isAdmin

    },
    cache: false,          
    success: function(data) {              
    toastr.success('Admin Role Successfully Changed ! ', 'Congratulations', {timeOut: 5000});
    //$('#example1').DataTable().ajax.reload();           
    },

    error: function (jqXHR, exception) {    
        console.log(jqXHR);
        toastr.error('Something Error !', 'Status not Changed!')
        },
    }); 
}); 
});

View :

<td>
    <form method="post">
     
     <div class="form-group">                
         <select class="form-control" data-id="" id="role" name="role">
         <option value="0">Select a Role</option>
          @foreach ($roles as $role)
          <option @if($user->isAdmin==$role->id) selected @endif value=""></option>
          @endforeach
          </select>
       </div>  
    </form>          
  </td>

Please see the user table view

via Chebli Mohamed