laravel livewire insert selected data from datatable to an application form

Question

I have a datatable with a list of job/career vacancies where in the selected item_number and position_title should be automatically filled in the application form.

item_number and position_title becomes null in the apply.blade.php

Vacant Component

class Vacant extends Component
{
    use WithPagination;
    use WithSorting;
    use WithConfirmation;

    protected $listeners = ['careerUpdated'];

    public int $perPage;

    public array $orderable;

    public string $search = '';

    public array $selected = [];

    public array $paginationOptions;

    protected $queryString = [
        'search' => [
            'except' => '',
        ],
        'sortBy' => [
            'except' => 'id',
        ],
        'sortDirection' => [
            'except' => 'asc',
        ],
    ];

    public function careerUpdated() {
        // Just Blank
      }

    public function getSelectedCountProperty()
    {
        return count($this->selected);
    }

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function updatingPerPage()
    {
        $this->resetPage();
    }

    public function resetSelected()
    {
        $this->selected = [];
    }

    public function vacant($id){
        $career = Career::find($id);
        $this->career = $career;
        $this->emit('newCareer', $career->id);
      }

    public function mount()
    {
        $this->sortBy            = 'id';
        $this->sortDirection     = 'asc';
        $this->perPage           = 100;
        $this->paginationOptions = config('project.pagination.options');
        $this->orderable         = (new Career())->orderable;
    }

    public function render()
    {
        $query = Career::advancedFilter([
            's'               => $this->search ?: null,
            'order_column'    => $this->sortBy,
            'order_direction' => $this->sortDirection,
        ]);

        $careers = $query->paginate($this->perPage);

        return view('livewire.career.vacant', compact('careers', 'query'));
    }

vacant.blade.php

<table class="table table-index w-full" style="background-color: white; font-size: 13px;">
                <thead>
                    <tr >
                        <th>
                            {{ trans('cruds.career.fields.item_number') }}
                            @include('components.table.sort', ['field' => 'item_number'])
                        </th>
                        <th>
                            {{ trans('cruds.career.fields.postition_title') }}
                            @include('components.table.sort', ['field' => 'postition_title'])
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($careers as $career)
                        <tr>

                            <td>
                                {{ $career->item_number }}
                            </td>
                            <td>
                                {{ $career->postition_title }}
                            </td>
                            <td>
                                <div class="flex justify-end">
                                        <a class="btn btn-sm btn-success mr-2" href="{{ route('applicants.apply', ['career' => $career->id]) }}">
                                            {{ trans('Apply') }}
                                        </a>
                                            {{ trans('Apply') }}
                                        </a>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="10">No entries found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

Apply Component

class Create extends Component
{
    public Applicant $applicant;

    public $item_number, $position_title;

    public Career $career;

    public array $listsForFields = [];


    public function mount(Applicant $applicant)
    {
        $this->applicant = $applicant;
        $this->initListsForFields();
        $getCareerID = explode('/', url()->current());
        $this->career_id = end($getCareerID);
    }

    public function render()
    {
        return view('livewire.applicant.apply', ['career' => Career::find($this->career_id)]);
    }

    public function submit()
    {
        $this->validate();

        $this->applicant->save();
        $this->syncMedia();

        return redirect()->route('admin.applicants.index');
    }

    protected function rules(): array
    {
        return [
            'applicant.item_number' => [
                'string',
                'required',
            ],
            'applicant.position_title' => [
                'string',
                'required',
            ],
            'applicant.first_name' => [
                'string',
                'required',
            ],
            'applicant.middle_name' => [
                'string',
                'required',
            ],
            'applicant.last_name' => [
                'string',
                'required',
            ],
            'applicant.email' => [
                'email:rfc',
                'required',
                'unique:applicants,email',
            ],
    }

}

apply.blade.php

<form wire:submit.prevent="submit">

    <div class="form-group {{ $errors->has('career.item_number') ? 'invalid' : '' }}">
        <label class="form-label" for="item_number">{{ trans('cruds.career.fields.item_number') }}</label>
        <input class="form-control" type="text" name="item_number" id="item_number" wire:model.defer="career.item_number">
        <div class="validation-message">
            {{ $errors->first('career.item_number') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.career.fields.item_number_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('career.postition_title') ? 'invalid' : '' }}">
        <label class="form-label" for="postition_title">{{ trans('cruds.career.fields.postition_title') }}</label>
        <input class="form-control" type="text" name="postition_title" id="postition_title" wire:model.defer="career.postition_title">
        <div class="validation-message">
            {{ $errors->first('career.postition_title') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.career.fields.postition_title_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('applicant.first_name') ? 'invalid' : '' }}">
        <label class="form-label required" for="first_name">{{ trans('cruds.applicant.fields.first_name') }}</label>
        <input class="form-control" type="text" name="first_name" id="first_name" required wire:model.defer="applicant.first_name">
        <div class="validation-message">
            {{ $errors->first('applicant.first_name') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.applicant.fields.first_name_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('applicant.middle_name') ? 'invalid' : '' }}">
        <label class="form-label required" for="middle_name">{{ trans('cruds.applicant.fields.middle_name') }}</label>
        <input class="form-control" type="text" name="middle_name" id="middle_name" required wire:model.defer="applicant.middle_name">
        <div class="validation-message">
            {{ $errors->first('applicant.middle_name') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.applicant.fields.middle_name_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('applicant.last_name') ? 'invalid' : '' }}">
        <label class="form-label required" for="last_name">{{ trans('cruds.applicant.fields.last_name') }}</label>
        <input class="form-control" type="text" name="last_name" id="last_name" required wire:model.defer="applicant.last_name">
        <div class="validation-message">
            {{ $errors->first('applicant.last_name') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.applicant.fields.last_name_helper') }}
        </div>
    </div>
    <div class="form-group {{ $errors->has('applicant.email') ? 'invalid' : '' }}">
        <label class="form-label required" for="email">{{ trans('cruds.applicant.fields.email') }}</label>
        <input class="form-control" type="email" name="email" id="email" required wire:model.defer="applicant.email">
        <div class="validation-message">
            {{ $errors->first('applicant.email') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.applicant.fields.email_helper') }}
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-indigo mr-2" type="submit">
            Submit
        </button>
    </div>
</form>