File pond not working properly in form repeater

Question

I am using file pond in a repeat form, and if every input form is created correctly, a file pond is also created, but my problem is that in the second or third repeat form, all the previous file ponds are also there. I can not do anything so that they are not displayed i use blade and livewire with js

create file pond :

                const filepondPlace = document.getElementById('filepond-place')

                let filepondDiv = document.createElement('div')
                filepondDiv.setAttribute('id', row + '-filepond')
                filepondDiv.setAttribute('class', 'filepondDiv')
                filepondDiv.setAttribute('name', 'formRepeater.'+row)
                filepondPlace.appendChild(filepondDiv)

                let input = document.createElement('input')
                input.setAttribute('type', 'file')
                input.setAttribute('multiple', true)
                input.setAttribute('class', 'formRepeater.' + row)
                input.setAttribute('id', 'input' +row)
                input.setAttribute('name', 'formRepeater.'+row)
                filepondDiv.appendChild(input)

                let filePondEvent = new Event('filepond')
                filePondEvent.detail = [{
                    'id': 'input' +row
                }]

and this event :

     FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateType, FilePondPluginPdfPreview);

      document.addEventListener('filepond',function (event){
          let inputElement =document.getElementById(event.detail[0]['id'])
          const pond = FilePond.create(inputElement, {
                  // acceptedFileTypes: ['image/png'],
                  multiple: true,
                  name: 'filepond'+ inputElement.getAttribute('id'),
                  id : inputElement.getAttribute('id'),
                  maxFileSize: '3MB',
                  minFileSize: '1KB',
 inputElement.getAttribute('id')
              });


      })```

and my blade fie : 
`    <div class="modal fade" id="modalCenter" tabindex="-1" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header" >
                    <h5 class="modal-title secondary-font" id="modalCenterTitle">اپلود پیوست های مرتبط با مصوبه</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="filepond-place">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                        بستن
                    </button>
                </div>
            </div>
        </div>
    </div>`



I want to know only the file pond input in each repeat form