Laravel Livewire multispep form save data

this is my blade file
i have 2 problem i want different variable from javascript in this 3 step and in final page i want make a summary of 3 different preset and save to my database like:

id_client: = 1 ; order_1d =1 sub_order = 1

id_client: = 1 ; order_1d =1 sub_order = 2

id_client: = 1 ; order_1d =1 sub_order = 3

I want save in my database the information corretct
I might have 2 options:

1. I save every time I go to the next page
2. I save at the end but I don’t know how to differentiate the variables that come from the javascript function

<pre>
<form wire:submit.prevent="submit" class="pt-3">

    <div>


{{--    <div class="form-group {{ $errors->has('ordini.id_tipo') ? 'invalid' : '' }}">
        <label class="form-label" for="id_tipo">{{ trans('cruds.ordini.fields.id_tipo') }}</label>
        <input class="form-control" type="number" name="id_tipo" id="id_tipo" wire:model.defer="ordini.id_tipo" step="1">
        <div class="validation-message">
            {{ $errors->first('ordini.id_tipo') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.ordini.fields.id_tipo_helper') }}
        </div>
    </div>--}}

    <div class="form-group">
        <button class="btn btn-indigo mr-2" type="submit">
            {{ trans('global.save') }}
        </button>
        <a href="{{ route('admin.ordinis.index') }}" class="btn btn-secondary">
            {{ trans('global.cancel') }}
        </a>
    </div>

{{--</form>--}}






{{--Inizio sessione  vecchia, scelta cliente--}}




</form>







    <form>

        {{-- STEP 1 --}}

        @if ($currentStep == 1)


            <div class="step-one">
                <div class="card">

                    <div class="card-header text-xl text-pink-400">Farmaci della mattina</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('ordini.cliente_id') ? 'invalid' : '' }}">
                                    <label class="form-label" for="cliente">{{ trans('cruds.ordini.fields.cliente') }}</label>
                                    <x-select-list class="form-control" id="cliente" name="cliente" :options="$this->listsForFields['cliente']" wire:model="ordini.cliente_id" />
                                    <div class="validation-message">
                                        {{ $errors->first('ordini.cliente_id') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.cliente_helper') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('prodotti') ? 'invalid' : '' }}">
                                    <label class="form-label" for="prodotti">{{ trans('cruds.ordini.fields.prodotti') }}</label>
                                    <x-select-list class="form-control" id="prodotti" name="prodotti" wire:model="prodotti" :options="$this->listsForFields['prodotti']" multiple />
                                    <div class="validation-message">
                                        {{ $errors->first('prodotti') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.prodotti_helper') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="">Description</label>
                            <textarea class="form-control" cols="2" rows="2" wire:model="description"></textarea>
                            <span class="text-danger">@error('description'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- STEP 2 --}}

        @if ($currentStep == 2)


            <div class="step-two">
                <div class="card">
                    <div class="card-header text-xl text-pink-400">Farmaci della pranzo</div>
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('ordini.cliente_id') ? 'invalid' : '' }}">
                                    <label class="form-label" for="cliente">{{ trans('cruds.ordini.fields.cliente') }}</label>
                                    <x-select-list class="form-control" id="cliente" name="cliente" :options="$this->listsForFields['cliente']" wire:model="ordini.cliente_id" />
                                    <div class="validation-message">
                                        {{ $errors->first('ordini.cliente_id') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.cliente_helper') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('prodotti') ? 'invalid' : '' }}">
                                    <label class="form-label" for="prodotti">{{ trans('cruds.ordini.fields.prodotti') }}</label>
                                    <x-select-list class="form-control" id="prodotti" name="prodotti" wire:model="prodotti" :options="$this->listsForFields['prodotti']" multiple />
                                    <div class="validation-message">
                                        {{ $errors->first('prodotti') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.prodotti_helper') }}
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        @endif
        {{-- STEP 3 --}}

        @if ($currentStep == 3)


            <div class="step-three">
                <div class="card">
                    <div class="card-header text-xl text-pink-400">Farmaci della sera</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('ordini.cliente_id') ? 'invalid' : '' }}">
                                    <label class="form-label" for="cliente">{{ trans('cruds.ordini.fields.cliente') }}</label>
                                    <x-select-list class="form-control" id="cliente" name="cliente" :options="$this->listsForFields['cliente']" wire:model="ordini.cliente_id" />
                                    <div class="validation-message">
                                        {{ $errors->first('ordini.cliente_id') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.cliente_helper') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('prodotti') ? 'invalid' : '' }}">
                                    <label class="form-label" for="prodotti">{{ trans('cruds.ordini.fields.prodotti') }}</label>
                                    <x-select-list class="form-control" id="prodotti" name="prodotti" wire:model="prodotti" :options="$this->listsForFields['prodotti']" multiple />
                                    <div class="validation-message">
                                        {{ $errors->first('prodotti') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.prodotti_helper') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- STEP 4 --}}
        @if ($currentStep == 4)


            <div class="step-four">
                <div class="card">
                    <div class="card-header bg-secondary text-white">STEP 4/4 - Attachments</div>
                    <div class="card-body">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque delectus officia inventore id facere at aspernatur ad corrupti asperiores placeat, fugiat tempora soluta optio recusandae eligendi impedit ipsam ullam amet!
                        <div class="form-group">
                            <label for="cv">CV</label>
                            <input type="file" class="form-control" wire:model="cv">
                            <span class="text-danger">@error('cv'){{ $message }}@enderror</span>
                        </div>
                        <div class="form-group">
                            <label for="terms" class="d-block">
                                <input type="checkbox"  id="terms" wire:model="terms"> You must agree with our <a href="#">Terms and Conditions</a>
                            </label>
                            <span class="text-danger">@error('terms'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>
            </div>

        @endif

        <div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">

            @if ($currentStep == 1)
                <div></div>
            @endif

            @if ($currentStep == 2 || $currentStep == 3 || $currentStep == 4)
                <button type="button" class="btn btn-md btn-secondary" wire:click="decreaseStep()">Back</button>
            @endif

            @if ($currentStep == 1 || $currentStep == 2 || $currentStep == 3)
                <button type="button" class="btn btn-md btn-success" wire:click="increaseStep()">Next</button>
            @endif

            @if ($currentStep == 4)
                <button type="submit" class="btn btn-md btn-primary">Submit</button>
            @endif


        </div>

    </form>


</div>

</pre>

my controller:

<?php

namespace AppHttpLivewireOrdini;

use AppModelsCustomer;
use AppModelsOrdini;
use AppModelsProduct;
use LivewireComponent;

class Create extends Component
{
    public Ordini $ordini;

    public array $prodotti = [];

    public array $listsForFields = [];


    public $totalSteps = 4;
    public $currentStep = 1;







    public function mount(Ordini $ordini)
    {
        $this->ordini = $ordini;
        $this->initListsForFields();
    }

    public function render()
    {
        return view('livewire.ordini.create');
    }

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

        $this->ordini->save();
        $this->ordini->prodotti()->sync($this->prodotti);

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


    }


    public function increaseStep(){
        $this->resetErrorBag();
        $this->validate();
        $this->currentStep++;
        if($this->currentStep > $this->totalSteps){
            $this->currentStep = $this->totalSteps;
        }
    }

    public function decreaseStep(){
        $this->resetErrorBag();
        $this->currentStep--;
        if($this->currentStep < 1){
            $this->currentStep = 1;
            //render();
        }
    }


    protected function rules(): array
    {
        return [
            'ordini.name' => [
                'string',
                'nullable',
            ],
            'ordini.cliente_id' => [
                'integer',
                'exists:customers,id',
                'nullable',
            ],
            'prodotti' => [
                'array',
            ],
            'prodotti.*.id' => [
                'integer',
                'exists:products,id',
            ],
            'ordini.id_tipo' => [
                'integer',
                'min:-2147483648',
                'max:2147483647',
                'nullable',
            ],
        ];
    }

    protected function initListsForFields(): void
    {
        $this->listsForFields['cliente']  = Customer::pluck('name', 'id')->toArray();
        $this->listsForFields['prodotti'] = Product::pluck('name', 'id')->toArray();
    }
}

and my other blade select list

<pre>
 <div>
    <div wire:ignore class="w-full">
        @if(isset($attributes['multiple']))
            <div id="{{ $attributes['id'] }}-btn-container" class="mb-3">
                <button type="button" class="btn btn-info btn-sm select-all-button">{{ trans('global.select_all') }}</button>
                <button type="button" class="btn btn-info btn-sm deselect-all-button">{{ trans('global.deselect_all') }}</button>
            </div>
        @endif
        <select class="select2 form-control" data-placeholder="{{ __('Select your option') }}" {{ $attributes }}>
            @if(!isset($attributes['multiple']))
                <option></option>
            @endif
            @foreach($options as $key => $value)
                <option value="{{ $key }}">{{ $value }}</option>
            @endforeach
        </select>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener("livewire:load", () => {
    let el = $('#{{ $attributes['id'] }}')
    let buttonsId = '#{{ $attributes['id'] }}-btn-container'

    function initButtons() {
        $(buttonsId + ' .select-all-button').click(function (e) {
            el.val(_.map(el.find('option'), opt => $(opt).attr('value')))
            el.trigger('change')
        })

        $(buttonsId + ' .deselect-all-button').click(function (e) {
            el.val([])
            el.trigger('change')
        })
    }

    function initSelect () {
        initButtons()
        el.select2({
            placeholder: '{{ __('Select your option') }}',
            allowClear: !el.attr('required')
        })
    }

    initSelect()

    Livewire.hook('message.processed', (message, component) => {
        initSelect()
    });

    el.on('change', function (e) {
        let data = $(this).select2("val")
        if (data === "") {
            data = null
        }
@this.set('{{ $attributes['wire:model'] }}', data)
    });
});
    </script>
@endpush  
</pre>

i have 2 problem i want different variable from javascript in this 3 step and in final page i want make a summary of 3 different preset and save to my database like:

id_client: = 1 ; order_1d =1 sub_order = 1

id_client: = 1 ; order_1d =1 sub_order = 2

id_client: = 1 ; order_1d =1 sub_order = 3

I want save in my database the information corretct

thia ia my create order, with button next i make another page, that page is same . And i want 3 oh these. In the last page i want alle the information