Form & Schema design enabling inserting/editing record with many-to-many relationship

Hi Folks,
I would greatly appreciate any suggestions for the following requirement I’m trying to implement with Phoenix. I’ve gotten a few screenshots attached as well.

  1. I have a DB table-schema like so:
    Sponsors <----many-to-many ----> SponsorsStudents <----many-to-many ----> Students

  2. A user creates a few sponsors. I already have a form which facillitates this and it’s working well.

It’s henceforth that I’m having issues:

  1. User initiates to create a new Student with “New Student” form.

  1. Clicks “Add Sponsor” to pop-up a ‘modal’, Sponsor selector window

  1. Clicks on a sponsor and clicks “Select Sponsor”

  1. Selected sponsor is listed back in the “New Student” form, with the Sponsor selector form now closed.

  1. User selects another Sponsor as before (step 4 onwards), to now have 2 sponsors listed in the “New Student” registration form

  1. Upon clicking Submit (of the New Student form), the controller should create a new student record in the Students table along with ‘relating’ records in the SponsorsStudents table.

The current form that I have for New Student is:
File: new.html.eex

<h1>New Student</h1>

<%= render "newedit.html", changeset: @changeset, conn: @conn, action: Routes.student_path(@conn, :create) %>

File: newedit.html.eex


<%= form_for @changeset, @action, [id: :studentForm], fn f -> %> 

  <%= if @changeset.action do %>
  <strong>Form contains errors. Please correct them before resubmitting!</strong>
  <% end %>

  <%= label f, :name %>
  <%= error_tag f, :name%>
  <%= text_input f, :name %> 

  <%= label f, :gender %>
  M <%= radio_button f, :gender, "M" %>
  F <%= radio_button f, :gender, "F" %>

  <%= label f, :mobile %>
  <%= error_tag f, :mobile%>
  <%= text_input f, :mobile %> 

  <%= label f, :email %>
  <%= error_tag f, :email%>
  <%= email_input f, :email %> 

  <%= label f, :comment %>
  <%= error_tag f, :comment%>
  <%= textarea f, :comment %> 


  <%= submit "Submit" %>
<% end %>

<%# Button click handler defined in js %>
<button id="add-sponsor-btn">+ Add Sponsor</button>

What is the best practice of achieving this use case i.e. the form design, db schema etc? I’m really at my wits end. I am fairly new with Elixir and more so with Phoenix/Ecto. Been reading the Programming Phoenix and Programming Ecto books as well but to no avail, or I’m just not seeing it. All the discussions/tips I’ve read deals mainly with the schema/db but hardly anything about the forms. Any suggestions please?

Many thanks.

Note: I’ve avoided using a select HMTL tag in the New Student form as I’d like to provide the user the ability to search for particular sponsors, before the user can select and assign the sponsor to the student.