Dynamically add section doesn't work after retrieving the data from DB

#1

I have a button that adds a new language section to the form for the users to add a new language to their profile and it was working fine until I added that part which gets the existing user languages from DB to show in case they want to change the language or update it. I have been struggling for hours and can’t figure out why is this happening why it stops working when the getUserLanguages function is being called. and when remove the getUserLanguages function from the render method it will start working again.

component controller:

public function addLanguage($i)
{
    $i = $this->i;
    if ($i <= 3)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->languages , ['language_name'=>'', 'language_level'=>'']);
    }
    else
    {
        $this->sweetAlert('error', 'Only 3 languages are allowed.');
    }
}


public function getUserLanguages()
{
    if (empty(!UserLanguage::where('user_id', auth()->user())))
    {
        $this->languages = UserLanguage::where('user_id', auth()->user()->id)->get(['language_name', 'language_level'])->toArray();
        $this->i = count($this->languages);
    }
}

the view:

@foreach ($languages as $index)
    <div class="card card-body mb-4">
        <div class="row">
            <div class="form-group col-md-6">
                <label class="" for="languageName">Language</label>
                <select class="form-control form-control-alternative" name="language-name" {{-- id="languageName" --}} wire:model="languages.{{ $loop->index }}.language_name">
                    <option value="" class="form-control" selected disabled>Select langauge</option>
                    @foreach ($language_names as $name)
                        <option value="{{ $name->abbreviation }}" class="form-control">{{ $name->language }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-6">
                <label class="" for="languageProficiency">Proficiency</label>
                <select class="form-control form-control-alternative" name="language-proficiency" {{-- id="languageProficiency" --}} wire:model="languages.{{ $loop->index }}.language_level">
                    <option value="" class="form-control" selected disabled>Proficiency Level</option>
                    @foreach ($language_levels as $level)
                        <option value="{{ $level->level }}" class="form-control">{{ $level->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    @error('languages.*.level')
        <small class="text-warning">{{ $message }}</small>
    @enderror
    @error('languages.*.language')
        <small class="text-warning">{{ $message }}</small>
    @enderror
@endforeach

@if (count($languages) < 3)
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-outline-secondary btn-round btn-block" wire:click="addLanguage({{$i}})"><span class="btn-inner--icon"><i class="fa fa-plus fa-2x"></i></span></button>
        </div>
    </div>
@endif