Problem with Livewire Upload

Hello Everyone , I was use livewire in my laravel project and i use that to upload some Music and Image files i was make progress bar with js for both and when i use both of components in one blade template , i want upload music and progress bar of both component will complete

ImageUpload.php (livewire Component) :

<div class="artwork-file">
    <div class="upload-box-container">
        <div id="imageButton" class="cover-image-container">
            <div class="drop-container" id="photos">
                @if(session()->has('link'))
                    <img src="{{session('link')}}" alt="{{$product->title}}">
                @elseif(! is_null($image))
                    <img src="{{$image->temporaryUrl()}}" class="preview" alt="{{$product->title}}">
                @elseif($product->thumbnail)
                    <img src="{{$product->thumbnail}}" alt="{{$product->title}}">
                @else
                    <i class="fal fa-image icon-photo-upload"></i>
                @endif
            </div>
        </div>
        <div class="info">
            <p> Artwork Dimension <br> Preferred: 1500x1500px, Minimum: 500x500px <br></p>
            <p> Got Photoshop? Make your own using our free template. <br>
                <a href="#"> Download PSD Template. </a>
            </p>
        </div>
        <div class="btn-container" wire:loading.remove wire:target="imageUpload" id="coverSaveButton" style="display: none">
            <div type="submit" class="button" wire:click="imageUpload">
                <span class="mat-button-wrapper" wire:loading.remove>
                    <span> {{__('ذخیره تصویر')}} </span>
                </span>
            </div>
        </div>
        <div class="btn-container" wire:target="imageUpload" wire:loading>
            <div type="submit" class="button">
                <span class="mat-button-wrapper">
                    <span> {{__('در حال ذخیره')}} </span>
                </span>
            </div>
        </div>
        <input type="file" id="imageFile" name="image" wire:model="image" hidden>
        <div class="progress-bar" style="display: none">
            <div class="progress-fill" style="width: 0%"></div>
        </div>
    </div>


</div>
<script>
    document.addEventListener('livewire:load' , () => {
        let progressSection = document.querySelector('.progress-bar'),
            progressBar = progressSection.querySelector('.progress-fill');
        let saveButton = document.querySelector('#coverSaveButton');

        document.addEventListener('livewire-upload-start' , () => {
            console.log('upload start');
            progressSection.style.display = 'flex';
            progressBar.style.width = '0%';
        });
        document.addEventListener('livewire-upload-finish' , () => {
            console.log('upload finish');
            progressSection.style.display = 'none';
            saveButton.style.display = 'block';
        });
        document.addEventListener('livewire-upload-error' , () => {
            console.log('upload error');
            progressSection.style.display = 'none';
        });
        document.addEventListener('livewire-upload-progress' , (event) => {
            console.log(`${event.detail.progress}%`);
            progressSection.style.display = 'flex';
            progressBar.style.width = `${event.detail.progress}%`;
        });
    })
</script>

and MusicUpload.php (Livewire Component) :

<div class="cdk-drop-list drop-container" id="un-tagged-tracks">
    <button id="untaggedMp3Button" type="button" class="btn-files">
        <span class="mat-button-wrapper">
            <div class="wrapper">
                <i class="fa fa-music" aria-hidden="true"></i>
                <div class="button-text">
                    <p>{{__('فایل صوتی بدون تگ')}}</p>
                    <p class="files-info">.WAV (or .MP3)</p>
                </div>
            </div>
        </span>
    </button>
    <span id="{{"p".$numMusic}}" class="music-progress-bar">
        <span id="{{"f".$numMusic}}" class="music-progress-fill"></span>
    </span>
    <input id="untaggedMp3" wire:model="music" type="file" hidden/>
</div>

<script>
    document.addEventListener('livewire:load' , () => {
        let progressSection = document.querySelector('#{{"p".$numMusic}}'),
            progressBar = progressSection.querySelector('#{{"f".$numMusic}}');

        document.addEventListener('livewire-upload-start' , () => {
            console.log('upload start');
        });
        document.addEventListener('livewire-upload-finish' , () => {

        });
        document.addEventListener('livewire-upload-error' , () => {
            console.log('upload error');
        });
        document.addEventListener('livewire-upload-progress' , (event) => {
            console.log(`${event.detail.progress}%`);
            progressBar.style.width = `${event.detail.progress}%`;
        });
    })
</script>

and My Blade :

<div>
	<livewire:music-upload code="{{$product->code}}" :product="$product" />
	<livewire:image-upload code="{{$product->code}}" :product="$product" />
</div>