Laravel10 Form field that brings up another datable to search and select item, then that item is added to the field

i have 3 tables ie… Owners, Vehicles and Drivers.
On the add drivers view, how do i make a field when click will open up another window or hidden datatable to select the “Owner of vehicle” and other field to selected “vehicle” with search. Both these cannot be dropdown options as the owners and vehicle tables will be large.

ADD DRIVER VIEW

`@extends(‘admin.admin_dashboard’)
@section(‘admin’)

    <div class="row profile-body">
        <!-- left wrapper start -->

        <!-- left wrapper end -->
        <!-- middle wrapper start -->
        <div class="col-md-8 col-xl-8 middle-wrapper">
            <div class="row">
                <div class="card">
                    <div class="card-body">

                        <h6 class="card-title">Add A Driver</h6>

                        <form method="POST" action="{{ route('store.operator') }}" class="forms-sample">
                            @csrf

                            <div class="mb-3">
                                <label for="exampleInputUsername1" class="form-label">Name</label>
                                <input type="text" name="name"
                                    class="form-control @error('name') is-invalid @enderror">
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror

                            </div>


                            <div class="mb-3">
                                <label for="exampleInputUsername1" class="form-label">ID Number</label>
                                <input type="text" name="id_num"
                                    class="form-control @error('id_num') is-invalid @enderror">
                                @error('id_num')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror

                            </div>

                            <div class="mb-3">
                                <label for="exampleInputUsername1" class="form-label">Address</label>
                                <input type="text" name="address"
                                    class="form-control @error('address') is-invalid @enderror">
                                @error('address')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror

                            </div>

                            <div class="mb-3">
                                <label for="exampleInputUsername1" class="form-label">Phone</label>
                                <input type="text" name="phone"
                                    class="form-control @error('phone') is-invalid @enderror">
                                @error('phone')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror

                            </div>



                            <div class="mb-3">
                                <label for="exampleInputUsername1" class="form-label">Owner</label>
                                <input type="text" name="onwer_id"
                                    class="form-control @error('onwer_id') is-invalid @enderror">
                                @error('onwer_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror

                            </div>

                            <div class="mb-3">
                                <label for="exampleInputUsername1" class="form-label">Vehicle</label>
                                <input type="text" name="vehicle_id"
                                    class="form-control @error('vehicle_id') is-invalid @enderror">
                                @error('vehicle_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror

                            </div>

                            <div class="mb-3">
                                <label for="exampleFormControlSelect1" class="form-label">Blacklisted</label>
                                <select name="black_listed" class="form-select" id="exampleFormControlSelect1">

                                    <option selected="" disabled="">Select Option</option>
                                    <option>Yes</option>
                                    <option>No</option>


                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="exampleFormControlTextarea1" class="form-label">Notes About Driver</label>
                                <textarea class="form-control" name="notes" id="exampleFormControlTextarea1" rows="5"></textarea>
                            </div>



                            <button type="submit" class="btn btn-primary me-2">Save Changes</button>

                        </form>

                    </div>
                </div>

            </div>
        </div>
        <!-- middle wrapper end -->

    </div>

</div>

@endsection
`

Not sure what is the right way to do this