cocoonを用いた１対多のフォームズ内の、file

現在gem 'cocoon'を用いて、1対多のフォームを作成しており、フォームズ内に動画をアップロードするfile_fieldがあります。file_fieldをcss,javascriptを用いてアップロード時にはファイル名が表示されるように実装しているのですが、フォーム複数追加時に最初と最後のフォーム以外のfile_fieldに動画がアップロードできなくなってしまいます。おそらくjavascriptの問題だと思うのですが、原因が分かる方教えていただけると助かります。

Ruby
1
2<div class="nested-fields form-inline">
3  <div class = "edit step1 padding">
4  <h2>STEP</h2>
5   <div class="row">
6    <div class="col-md-5 content fileUploder">
7     <i class="fas fa-photo-video d-block mt-2">
8     </i>
9     <div id="btn2" class="btn2 mt-3">ファイルを選択</div>
10      <%= f.file_field :video, class: "file_field", id: "files", style: "color: red", required: true %>
11      <input class="text-center mt-2" type="text" id="filename" placeholder="選択されていません" readonly />
12     </div>
13     <div class="col-md-7 content">
14      <h3>・概要</h3>
15       <%= f.text_area  :content, multipart: true, required: true, placeholder: "練習の概要を入力" %>
16      <h3>・ポイントや注意点</h3>
17       <%= f.text_area :point, multipart: true, required: true,placeholder: "練習時のポイントや注意点を入力" %>
18     </div>
19   </div>
20  </div>
21 <%= link_to_remove_association "ステップの削除", f ,class: "remove" %>
22
23

javascript
1 <script type="text/javascript" charset="utf-8">
2  $(function() {
3
4
5      if($('#ingredients .nested-fields').length == 1){
6        $('#ingredients a.remove_fields').hide();
7        }
8      
9      if($('#ingredients .nested-fields').length == 2){
10        $('#ingredients #filename').eq(1).attr('id','filename2');
11        $('#ingredients #files').eq(1).attr('id','files2');
12        $('#ingredients #btn2').eq(1).attr('id','btn3');
13        }
14
15      if($('#ingredients .nested-fields').length == 3){
16        $('#ingredients #filename').eq(1).attr('id','filename3');
17        $('#ingredients #files').eq(1).attr('id','files3');
18        $('#ingredients #btn2').eq(1).attr('id','btn4');
19        }
20
21      if($('#ingredients .nested-fields').length == 4){
22        $('#ingredients #filename').eq(1).attr('id','filename4');
23        $('#ingredients #files').eq(1).attr('id','files4');
24        $('#ingredients #btn2').eq(1).attr('id','btn5');
25        }
26
27    if($('#ingredients .nested-fields').length == 5){
28        $('#ingredients #filename').eq(1).attr('id','filename5');
29        $('#ingredients #files').eq(1).attr('id','files5');
30        $('#ingredients #btn2').eq(1).attr('id','btn6');
31       }
32
33
34      $('#ingredients a.add_fields').on('click', function(){
35       if($('#ingredients .nested-fields').length == 4){
36          $('#ingredients a.add_fields').hide(); 
37       }
38    });
39    $('#ingredients a.remove_fields').on('click', function(){
40       if($('#ingredients .nested-fields').length == 5){
41           $('#ingredients a.add_fields').show();
42       }
43       if($('#ingredients .nested-fields').length == 1){
44        $('#ingredients a.remove_fields').hide();
45       }
46    });
47     $('#files2').css({
48         'position': 'absolute',
49         'top': '-9999px'
50     }).change(function() {
51         var val2 = $(this).val();
52         var path2 = val2.replace(/\/g, '/');
53         var match2 = path2.lastIndexOf('/');
54    $('#filename2').css("display","inline-block");
55         $('#filename2').val(match2 !== -1 ? val2.substring(match2 + 1) : val2);
56     });
57     $('#filename2').bind('keyup, keydown, keypress', function() {
58         return false;
59     });
60     $('#filename2, #btn3').click(function() {
61         $('#files2').trigger('click');
62     });
63 
64 
65     $('#files3').css({
66         'position': 'absolute',
67         'top': '-9999px'
68     }).change(function() {
69         var val3 = $(this).val();
70         var path3 = val3.replace(/\/g, '/');
71         var match3 = path3.lastIndexOf('/');
72    $('#filename3').css("display","inline-block");
73         $('#filename3').val(match3 !== -1 ? val3.substring(match3 + 1) : val3);
74     });
75     $('#filename3').bind('keyup, keydown, keypress', function() {
76         return false;
77     });
78     $('#filename3, #btn4').click(function() {
79         $('#files3').trigger('click');
80     });
81
82     $('#files4').css({
83         'position': 'absolute',
84         'top': '-9999px'
85     }).change(function() {
86         var val4 = $(this).val();
87         var path4 = val4.replace(/\/g, '/');
88         var match4 = path4.lastIndexOf('/');
89    $('#filename4').css("display","inline-block");
90         $('#filename4').val(match4 !== -1 ? val4.substring(match4 + 1) : val4);
91     });
92     $('#filename4').bind('keyup, keydown, keypress', function() {
93         return false;
94     });
95     $('#filename4, #btn5').click(function() {
96         $('#files4').trigger('click');
97     });
98
99     $('#files5').css({
100         'position': 'absolute',
101         'top': '-9999px'
102     }).change(function() {
103         var val5 = $(this).val();
104         var path5 = val5.replace(/\/g, '/');
105         var match5 = path5.lastIndexOf('/');
106    $('#filename5').css("display","inline-block");
107         $('#filename5').val(match5 !== -1 ? val5.substring(match5 + 1) : val5);
108     });
109     $('#filename5').bind('keyup, keydown, keypress', function() {
110         return false;
111     });
112     $('#filename5, #btn6').click(function() {
113         $('#files5').trigger('click');
114     });
115  });
116   
117
118 
119</script>