Смена ролей в админке в чекбоксе

В представленном контроллере он отображает всех пользователей и его атрибуты (?), Такие как имя, фамилия, телефон и роли. Как мне сделать так, чтобы когда я выбирал роль в чекбоксе и нажимал «potvrdi» (отправить), она отправлялась в базу данных? Обязательно ли использовать jquery, ajax? Спасибо

Контроллер

public function action(Request $request)
    {
        if ($request->ajax()) {
            $query = $request->get('query');
            if ($query != '') {
                $data = User::where('surname', 'like', '%'.$query.'%')
                    ->orWhere('name', 'like', '%'.$query.'%')
                    ->orWhere('phone', 'like', '%'.$query.'%')
                    ->orderBy('id')
                    ->get();
            } else {
                $data = User::orderBy('id')
                    ->get();
            }
            return json_encode($this->generateUserTable($data));
        }
    }

    public function generateUserTable($data)
    {
        $total_row = $data->count();
        $output = "";
        if ($total_row > 0) {
            foreach ($data as $row) {
                $roleNames = '';
                $userRoles = $row->roles()->pluck('id')->toArray();
                // var_dump($userRoles);
                $checked = '';
                foreach (Role::all() as $roles1) {
                    if (in_array($roles1->id, $userRoles)) {
                        $checked = 'checked = "checked"';
                    }
                    $roleNames .= $roles1->role != null ? $roles1->role.' '.'<input type = "checkbox" '.$checked.' name = "role" value = "'.$roles1->id.'" class = "checkbox" id = "checkboxId">'.' ' : '';
                }
                $output .= '
                    <tr>
                        <td>'.$row->surname.'</td>
                        <td>'.$row->name.'</td>
                        <td>'.$row->phone.'</td>
                        <td>'.$roleNames.'</td>
                        <td><button type = "button" id = "potvrdi" class = "potvrdi-button btn btn-primary" data-id = "'.$row->id.'">
                        <div class = "potvrdi">Potvrdi</div>
                        </button></td>
                        <td><button type = "button" id = "rowId" class = "remove-button btn btn-danger" data-id = "'.$row->id.'">
                        <div class = "close">&#120;</div>
                        </button></td>
                    </tr>
                ';
            }
        } else {
            $output = '
                <tr>
                    <td align = "center" colspan = "5">Nema podataka</td>
                </tr>
            ';
        }
        return array(
            'table_data'  => $output,
            'total_data'  => $total_row,
        );
    }

Обновлено:

часть html находится в контроллере после $ output в generateUserTable

просмотр с помощью js

<!-- Modal -->
<div class = "modal fade" id = "deleteModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true">
    <div class = "modal-dialog" role = "document">
        <div class = "modal-content">
            <div class = "modal-header">

            </div>
            <div class = "modal-body">
                <h2>{{ $modal }}</h2>
            </div>
            <div class = "modal-footer">
                <button type = "button" class = "rem-mod btn btn-secondary" data-dismiss = "modal">Zatvori</button>
                <button type = "button" class = "bck-mod test btn btn-danger" data-dismiss = "modal">Obriši korisnika</button>
            </div>
        </div>
    </div>
</div>
<!-- users and search bar -->
<div class = "container">
    <div class = "panel panel-default">
    <div class = "panel-heading">Pretraži korisnike</div>
        <div class = "panel-body">
            <div class = "form-group">
                <input type = "text" name = "search" id = "search" class = "form-control" placeholder = "Pretraži korisnike" />
            </div>
            <div class = "table-responsive">
                <h3 align = "center">Broj korisnika: <span id = "total_records"></span></h3>
                <table id = "users" class = "table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Prezime</th>
                            <th>Ime</th>
                            <th>Telefon</th>
                            <th>Rola</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                <tbody>

                </tbody>
                </table>
            </div>
        </div>    
    </div>
</div>

Получает данные из базы данных

<script>   
    $(document).ready(function(){
        fetch_user_data();
        function fetch_user_data(query = ''){
            $.ajax({
                url:"{{ route('live_search.action') }}",
                method:'GET',
                data:{query:query},
                dataType:'json',
                success:function(data)
                {
                    $('tbody').html(data.table_data);
                    $('#total_records').text(data.total_data);
                }
            })
        }

        $(document).on('click', '.potvrdi-button', function(){
            post_user_role();
            var id = $(this).data('id');
            function post_user_role(id){
                $.ajax({
                    url:"{{ route('live_search.action') }}",
                    method:"GET",
                    data:{id:id},
                    dataType:'json',
                    success:function(data)
                    {
                        $('tbody').html(data.table_data);
                        $('#total_records').text(data.total_data);
                    }
                })
            }
        })

        $(document).on('keyup', '#search', function(){
            var query = $(this).val();
            fetch_user_data(query);
        });

Модальный js

        $('#users').on('click', '.remove-button', function(){
            var id = $(this).data('id');
            $(".test").attr('data-id', id);
            $("#deleteModal").modal("show");
        });

        $(document).on('click', '.bck-mod', function(){
            var id = $(this).data('id');
            $.ajax({
                //url:"{{ route('live_search.destroy') }}",
                url:"/live_search/destroy",
                method:"get",
                data:{id:id},
                dataType:'json',
                success:function(data)
                {
                    $('tbody').html(data.table_data);
                    $('#total_records').text(data.total_data);
                },
                error: function(data)
                {
                    console.info(data);
                }
            })
        });
    });
</script>