JQuery с dataTransfer перемещает данные из нескольких таблиц в поля ввода

1. У меня есть таблица с 2 строками, но я могу дублировать ее кнопкой (Добавить еще одно средство Word) и ТОЛЬКО ОДНОЙ КНОПКОЙ ОТПРАВИТЬ для всех строк:

2. Ниже приведен код JQuery, который получает записанное аудио из маленького плеера для каждой строки и перемещает его в поле input type="file" при нажатии на кнопку submit. (Это форма панели администратора Django)
.

$( document ).ready(function() {
    $('input[type=submit]').click(async function(e) {
        let url = $('audio').attr('src')
        if(url != undefined){
            const fileInput = document.querySelector('input[type="file"]');
   
            let file = await fetch(url)
                    .then(r => r.blob())
                    .then(blobFile => new File([blobFile], "user_recording.mp3", { type: "mp3" }))

            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            fileInput.files = dataTransfer.files;
        }
        $('#word_form').submit()
    });
});

Проблема в том, что приведенный выше скрипт JQuery работает только для первого и одного ряда. Может ли кто-нибудь помочь мне модифицировать вышеупомянутый скрипт, чтобы он работал для каждого ряда (каждый ряд имеет свой аудио тег)? Извините за мой английский (это не мой родной язык :))

$( document ).ready(function() {
    $('input[type=submit]').click(async function(e) {
      let url = $('audio').each(function(){
      });

      for (i=0; i<url.length; i++) {
        new_url = url[i].getAttribute("src");
        if (new_url != undefined){
          const fileInput = document.getElementById('id_medias-'+i+'-path_to_file');
          let file = await fetch(new_url).then(r => r.blob()).then(blobFile => new File([blobFile], "user_recording.mp3", { type: "mp3" }))

          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(file);
          fileInput.files = dataTransfer.files;
        } 
      }
      $('#word_form').submit()
    });
});