I have two selected dropdown which the second dropdown is controlled by the first. It goes by this:

First dropdown:

<x-forms.select id="trees" label="Tree" wire:model.defer="tree" required>
    <x-slot name="option">
        @foreach($trees as $item)
            <option value="{{$item->id}}">{{ __(strtoupper($item->name))}}</option>
         @endforeach
     </x-slot>
 </x-forms.select>

Second dropdown

<x-forms.select id="fruits" label="Fruits" wire:model="fruit> </x-forms.select>

The x-forms.select is from assets/components

<div class="@error($attributes->wire('model')->value()) has-error @enderror ">
    <div  @isset($label) class="form-group" @endisset wire:ignore>
        @isset($label)
           <label class="control-label ">{{ $label ?? 'Select' }}</label>@if(isset($required))<span style="color: red">*</span>@endif
        @endisset

//and so on

So my question is how to make second label set 'required' (span added) from @if(isset($required))*@endif in the assets when the first dropdown is chosen.

I have tried

const targetLabel = $('#fruits').prev('label');
targetLabel.addClass('required');

 $('label[for="#fruits"]').append('<span style="color: red">*</span>');

 $('label[for="#fruits"]').addClass('required');

 $('#fruits').addClass('required');

 $('#fruits').next('label').append('<span style="color: red">*</span>');

I had done the logic when selected. So the remain is to add the 'required' class. Thank you