diff --git a/modules/costs/app/views/cost_types/_rate.html.erb b/modules/costs/app/views/cost_types/_rate.html.erb
index f0f6fb52fd65..a23bef31d88a 100644
--- a/modules/costs/app/views/cost_types/_rate.html.erb
+++ b/modules/costs/app/views/cost_types/_rate.html.erb
@@ -34,8 +34,6 @@ See COPYRIGHT and LICENSE files for more details.
   id_or_index = rate.new_record? ? index : rate.id
   prefix = "cost_type[#{new_or_existing}_rate_attributes][]"
   id_prefix = "cost_type_#{new_or_existing}_rate_attributes_#{id_or_index}"
-  classes ||= ""
-  classes += " subform-row-template" if templated
 
   @rate = rate
   error_messages = error_messages_for 'rate'
@@ -46,7 +44,11 @@ See COPYRIGHT and LICENSE files for more details.
   <tr><td colspan="3"><%= error_messages %></td></tr>
 <% end %>
 <%= fields_for prefix, rate, builder: TabularFormBuilder do |rate_form| %>
-  <tr class="subform-row <%= classes %>" id="<%= id_prefix %>">
+  <%= content_tag(:tr,
+                  id: id_prefix,
+                  data: templated ? { 'row-target': 'true' } : {},
+                  style: templated ? 'display: none;' : ''
+      ) do %>
     <td class="-no-ellipsis">
       <label class="hidden-for-sighted" for="<%= "#{id_prefix}_valid_from" %>"><%= Rate.human_attribute_name(:valid_from) %></label>
       <%= rate_form.date_picker :valid_from,
@@ -74,9 +76,11 @@ See COPYRIGHT and LICENSE files for more details.
       </span>
     </td>
     <td class="buttons">
-      <a href="#" class="delete-row-button no-decoration-on-hover">
+      <a href="#"
+         class="delete-row-button no-decoration-on-hover"
+         data-action="subform#deleteRow">
         <%= op_icon('icon-context icon-delete', title: t(:button_delete)) %>
       </a>
     </td>
-  </tr>
+  <% end %>
 <% end %>
diff --git a/modules/costs/app/views/cost_types/edit.html.erb b/modules/costs/app/views/cost_types/edit.html.erb
index c3e740488028..da0359006e9e 100644
--- a/modules/costs/app/views/cost_types/edit.html.erb
+++ b/modules/costs/app/views/cost_types/edit.html.erb
@@ -45,8 +45,8 @@ See COPYRIGHT and LICENSE files for more details.
   end
 %>
 
-<costs-subform item-count="<%= @cost_type.rates.length %>">
-<%= labelled_tabular_form_for @cost_type do |f| %>
+<%= labelled_tabular_form_for @cost_type,
+                              data: { controller: 'subform', 'application-target': 'dynamic' } do |f| %>
   <%= error_messages_for 'cost_type' %>
   <%= back_url_hidden_field_tag %>
 
@@ -95,7 +95,7 @@ See COPYRIGHT and LICENSE files for more details.
             <th><div class="generic-table--empty-header"></div></th>
           </tr>
         </thead>
-        <tbody id="rates_body" class="subform-container">
+        <tbody id="rates_body" class="subform-container" data-subform-target="table">
           <%= render partial: "rate", object: CostRate.new(valid_from: Date.current), locals: { templated: true } %>
           <% @cost_type.rates.sort do |a,b|
             case
@@ -118,7 +118,11 @@ See COPYRIGHT and LICENSE files for more details.
   </div>
   <div class="wp-inline-create-button">
     <label class="hidden-for-sighted" for="add_rate_date" %>"><%= t(:description_date_for_new_rate) %></label>
-    <a id="add_rate_date" href="#" class="add-row-button wp-inline-create--add-link" title="<%= t(:button_add_rate) %>">
+    <a id="add_rate_date"
+       href="#"
+       class="add-row-button wp-inline-create--add-link"
+       title="<%= t(:button_add_rate) %>"
+       data-action="subform#addRow">
       <%= op_icon('icon icon-add') %>
     </a>
   </div>