動的に追加される入力フォームで金額を自動計算したい

前提・実現したいこと

簡単な売り上げ計算機能的なやつを作成しています。そこでrailsのcocoonで動的な入力フォームを作成して、javascriptで金額入力欄に数字を打てば消費税や合計額が表示されるようにしたいです。最初の入力フォームに数字を打つと自動で計算ができるのですが、追加した入力フォームフォームでは計算されません。わかる方がいればぜひ教えていただきたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

javascript
1window.addEventListener('load', () =>  {
2
3  const moneyInput = document.getElementById("money-cost");
4      const subtotalOutput = document.getElementById("subtotal-cost");
5      const taxOutput = document.getElementById("tax-cost")
6      const totalOutput = document.getElementById("total-cost");
7      moneyInput.addEventListener("input", () => {
8        subtotalOutput.value = moneyInput.value;
9        const taxValue = Math.floor(subtotalOutput.value * 0.1);
10        taxOutput.value = taxValue;
11        const value_result = subtotalOutput.value;
12        const totalNumber = (Math.floor(parseInt(taxValue) + parseInt(value_result)));
13        totalOutput.value = totalNumber;
14      })
15    });

rails
1new.html.erb
2<%= form_with model: @cost_pdf, class: 'form', local: true do |f| %>
3<%= render 'layouts/error_messages', model: f.object %>
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <title>見積書</title>
8  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
9</head>
10<body class="bg-light">
11  <div class="container">
12    <div class="py-5 text-center">
13      <h2>見積書</h2>
14    </div>
15      <div class="order-md-1">
16        <form class="needs-validation" novalidate>
17          <div class="row">
18            <div class="col-md-6 mb-3">
19              <label for="familyName">会社名</label>
20              <%= f.text_field :company_name, class:"form-control", placeholder:"会社名    必須", list:"kenpo1" %>
21                <datalist id="kenpo1">
22                  <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %>
23                    <option><%= cost_pdf.company_name %></option>
24                  <% end %>
25                </datalist>
26            </div>
27            <div class="col-md-6 mb-3">
28              <label for="givenName">郵便番号</label>
29              <%= f.text_field :postal_code, class:"form-control", placeholder:"郵便番号 (例)000-0000     必須", list:"kenpo2" %>
30                <datalist id="kenpo2">
31                  <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %>
32                    <option><%= cost_pdf.postal_code %></option>
33                  <% end %>
34                </datalist>
35            </div>
36          </div>
37          <div class="row">
38            <div class="col-md-5 mb-3">
39              <label for="pref">住所</label>
40              <%= f.text_field :address, class:"form-control", placeholder:"住所     必須", list:"kenpo3" %>
41                <datalist id="kenpo3">
42                  <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %>
43                    <option><%= cost_pdf.address %></option>
44                  <% end %>
45                </datalist>
46            </div>
47            <div class="col-md-4 mb-3">
48              <label for="city">電話番号</label>
49              <%= f.text_field :tell, class:"form-control", placeholder:"電話番号 (例)00000000000     必須", list:"kenpo4" %>
50                <datalist id="kenpo4">
51                  <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %>
52                    <option><%= cost_pdf.tell %></option>
53                  <% end %>
54                </datalist>
55            </div>
56            <div class="col-md-3 mb-3">
57              <label for="zip">FAX</label>
58              <%= f.text_field :fax, class:"form-control", placeholder:"FAX (例)00000000000     任意", list:"kenpo5" %>
59                <datalist id="kenpo5">
60                  <% CostPdf.where(user_id: current_user.id).each do |cost_pdf| %>
61                    <option><%= cost_pdf.fax %></option>
62                  <% end %>
63                </datalist>
64            </div>
65          </div>
66          <div class="row">
67            <div class="col-md-6 mb-3">
68              <label for="familyName">受渡期日</label>
69              <%= f.date_field :delivery_date, class:"form-control", value:"", placeholder:"任意" %>
70              <label for="familyName">納入場所</label>
71              <%= f.text_field :delivery_location, class:"form-control", placeholder:"任意" %>
72            </div>
73            <div class="col-md-6 mb-3">
74              <label for="givenName">支払条件</label>
75              <%= f.text_field :payment_terms, class:"form-control", placeholder:"任意" %>
76              <label for="givenName">有効期限</label>
77              <%= f.date_field :expiration_date, class:"form-control", placeholder:"任意" %>
78            </div>
79          </div>
80          <div class="mx-auto">
81            <%= f.fields_for :quotations do |f| %>
82              <%= render "quotation_fields", f: f %>
83            <% end %>
84          </div>
85          <div id="detail-association-insertion-point"></div>
86          <div class="mt-2">
87          <%= link_to_add_association "追加", f, :quotations, class: 'add_fields' %>
88          </div>
89          <div class="row">
90            <div class="col-md-5 mb-3">
91              <label for="familyName">小計</label>
92              <%= f.text_field :subtotal, class:"form-control", id:"subtotal-cost", placeholder:"必須", readonly: true %>
93            </div>
94            <div class="col-md-4 mb-3">
95              <label for="givenName">消費税</label>
96              <%= f.text_field :tax, class:"form-control", id:"tax-cost", placeholder:"必須", readonly: true %>
97            </div>
98            <div class="col-md-3 mb-3">
99              <label for="givenName">合計</label>
100              <%= f.text_field :total, class:"form-control", id:"total-cost", placeholder:"必須", readonly: true %>
101            </div>
102          </div>
103          <div class="row">
104            <div class="col-md-6 mb-3">
105              <label for="familyName">顧客名</label>
106              <%= f.text_field :cliant_name, class:"form-control", placeholder:"顧客名    必須", list:"kenpo" %>
107                <datalist id="kenpo">
108                <option value="">顧客</option>
109                  <% Work.where(user_id: current_user.id).each do |work| %>
110                    <option><%= work.cliant_name %></option>
111                  <% end %>
112                </datalist>
113            </div>
114            <div class="col-md-6 mb-3">
115              <label for="address">備考</label>
116              <%= f.text_area :memo, class:"form-control", placeholder:"任意" %>
117            </div>
118          </div>
119          <hr class="mb-4">
120          <%= f.submit "作成", class:"btn btn-primary btn-lg btn-block" %>
121        </form>
122      </div>
123    </div>
124  </div>
125  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
126  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
127</body>
128<% end %>

rails
1_quotation_fields.html.erb
2<div class="nested-fields">
3
4      <td class="td-fixed-spoon">
5        <span class="box-spoon" id='spoon-auto' data-spoon='0'></span>
6      </td>
7      <td class="td-fixed-amount">
8      <div class="row">
9        <div class="col-md-6 mb-3">
10          <label for="familyName">品名</label>
11            <%= f.text_field :product_name, class:"form-control", placeholder:"必須" %>
12            <label for="familyName">数量</label>
13            <%= f.text_field :quantity, class:"form-control", placeholder:"任意" %>
14            <label for="givenName">単位</label>
15            <%= f.text_field :unit, class:"form-control", placeholder:"任意" %>
16        </div>
17          <div class="col-md-6 mb-3">
18            <label for="givenName">単価</label>
19            <%= f.text_field :unit_price, class:"form-control", placeholder:"任意" %>
20            <label for="givenName">金額</label>
21            <%= f.text_field :money, class:"form-control", id:"money-cost", placeholder:"必須" %>
22            <label for="familyName">備考</label>
23            <%= f.text_field :remarks, class:"form-control", placeholder:"任意" %>
24          </div>
25      </div>
26      </td>
27      <td class="td-fixed-unit">
28        <span class="box-unit" id='unit-auto' data-unit='0'></span>
29      </td>
30      <td class="td-fixed-delete">
31
32        <!-- 削除ボタン -->
33        <%= link_to_remove_association "削除", f %>
34
35      </td>
36    </tr>
37
38</div>
39

おそらく　id:"money-cost"の部分が1つしかないとみなされていると思うのでフォームが追加されたときにもidが増えていくようにしないといけないと思います。どうすればいいでしょうか？
_quotation_fields.html.erb のdivの中にtdがあるのは元々tabelを使っていてイア修正をしている途中だからです。
id:"money-cost"の部分は金額を入力したタイミングで小計、消費税、合計が表示されるようにしたいです。

補足情報（FW/ツールのバージョンなど）

ruby 2.6.5, rails 6.0.0

m.ts10806

2022/01/08 23:20

>_quotation_fields.html.erb 全体構造分かりませんが、divの中にtdがあったりそもそもHTML構造おかしくなりませんか？ >id:"money-cost"の部分が1つしかないとみなされていると思うのでこれについてはその通りで「ID」の意味が持つ通り、ページ内に重複は不可です。どのタイミングで計算したいかによりますが、JavaScriptの発火をclassにすればidに依存しないつくりにできるのでは（「入力した」なら動的要素なのでdocumentからイベント付与する必要はありますが）