Edit modals issues with finding target elements and Selectize.js

1

I have quite a complex form for a model (in this case a lesson) which has multiple associated models, which often have associated models …

The entire point of the product is to create lessons which are often quite long and complex so the user needs to be able to edit each part of the lesson individually.

When you click on certain parts of the form their is a generic modal that renders the form of the section/model you want to edit.

I then make an Ajax request to the update endpoint of whichever model is being updated, get the response and then update that section of the main form with something like insertAdjacentHTML.

For the above reasons I want to render forms for the model I am updating inside the modal and not the nested forms of the lesson.

However, by moving the modal outside of the data controller i don’t have access to the Stimulus targets !!!

Here is the html

<%= form_for @lesson do |f|  %>

<%= render 'main_lesson_fields', f: f %>

<p><%= f.submit t(:update_lesson), method: :update, class: "btn btn-primary" %></p>

<div data-controller="edit-lesson">
  <% @lesson.lesson_images.each do |lesson_image| %>
    <div class="card mt-2 mb-2" id="lesson-image-data-<%= @lesson.id %>-<%= lesson_image.id %>">
      <p style="display: none" data-image-url="<%= lesson_image.image.image.url(public: true) %>"><%= lesson_image.to_json(include: [:words, :phrases, :grammars]) %></p>
      <div class="card-body">
        <%= render 'lesson_image_show', lesson_image: lesson_image %>
      </div>
      <div class="Subhead hx_Subhead--responsive mb-2"></div>
      <div class="flex mb-2 text-right pr-6">
        <%= link_to t(:edit), '#', class: 'btn btn-outline-dark btn-sm', data: { toggle: "modal", target: "#editLessonImageModal", action: "click->edit-lesson#open_model", info: "lesson-image-data-#{@lesson.id}-#{lesson_image.id}" } %>
      </div>
    </div>
  <% end %>
</div>
<% end %>


<%= render 'lesson_image_modal' %>

How can I get access to the Stimulus targets without moving the model inside of the data-controller div ?

If this is impossible is there any issue using the document object to target the individual elements ?