Deep rails nested attributes on the fly - ruby-on-rails

Question

I have a form, the form has 'fields_for :addresses' and renders partial 'address_fields' in that 'fields_for :addresses', in that partial 'address_fields' there is 'fields_for :sub_address', when the browser is first loaded, the 'fields_for :sub_address' in the partial 'address_fields' appears, but when the 'Add Addresses' button is pressed the "fields_for :sub_address" element does not appear. So basically I have a nested form inside the nested form 'addresses', but it doesn't render when I click on 'Add Address'.
This is my 'Add Address' javascript code:
class AddFields {
constructor() {
this.links = document.querySelectorAll('.add_fields');
this.iterateLinks();
}
iterateLinks() {
if (this.links.length === 0) return
this.links.forEach(link => {
link.addEventListener('click', e => {
this.handleClick(link, e)
});
});
}
handleClick(link, e) {
if (!link || !e) return;
e.preventDefault();
let time = new Date().getTime();
let linkId = link.dataset.id;
let regexp = linkId ? new RegExp(linkId, 'g') : null
let newFields = regexp ? link.dataset.fields.replace(regexp, time) : null
newFields ? link.insertAdjacentHTML('beforebegin', newFields) : null
}
}
window.addEventListener('turbolinks:load', () => new AddFields());
here is my views:
new.html.erb
<%= form_with model: #data, url: address_path(token: params[:token]) do |form| %>
<div class="row">
<div class="col">
//another html here
</div>
</div>
<fieldset>
<div class="card mt-2">
<div class="card-body">
<%= form.fields_for :address do |addr| %>
<%= render 'sub_address_fields', form: addr %>
<% end %>
<%= link_to_add_fields 'Add Address', form, :addr %>
</div>
</div>
</fieldset>
<div class="form-group">
<%= form.submit :'Submit', name: 'submit', class: 'btn btn-primary mt-2' %>
</div>
<% end %>
```
partial view:
<div class="nested-fields">
<%= form.hidden_field :_destroy %>
<div class="row">
<div class="col">
//another html here
</div>
<%= form.fields_for :sub_address do |sub_addr| %>
<div class="row">
<div class="col">
<div class="form-group mt-2">
<div class="custom-file form-control">
<%= sub_addr.label :id_card, class: 'id-card-label', for: 'id-card-file' %>
<%= sub_addr.file_field :attachment_id_card, id: 'id-card-file' %>
</div>
</div>
</div>
<div class="col">
<div class="form-group mt-2">
<div class="custom-file form-control">
<%= sub_addr.label :self_assessment, class: 'self-assessment-label', for: 'self-assessment-file' %>
<%= sub_addr.file_field :attachment_self_assess, id: 'self-assess-file' %>
</div>
</div>
</div>
<div class="col">
<div class="form-group mt-2">
<div class="custom-file form-control">
<%= sub_addr.label 'SWAB', class: 'swab-label', for: 'swab-file' %>
<%= sub_addr.file_field :attachment_swab, id: 'swab-file' %>
</div>
</div>
</div>
</div>
<% end %>
<div class="form-group">
<%= link_to "Remove", '#', class: "remove_fields"%>
</div>
</div>
and this is the helper:
module Frontend::Data::DataHelper
def link_to_add_fields(name, form, association)
new_object = form.object.send(association).klass.new
id = new_object.object_id
fields = form.fields_for(association, new_object, child_index: id) do |builder|
render(association.to_s.singularize + '_fields', form: builder)
end
link_to(name, '#', class: 'add_fields', data: {id: id, fields: fields.gsub('\n', '')})
end
end
Is javascript not able to display the form generated from the 'render' function on rails?