I want to implement a view for teachers so they can add their students. It will be just a form containing name, age. and a add student button when the teacher clicks it shall add another form underneath the first and she can add as many as they can but the trick that every field shall have its own validations and then the render submit they will all be saved in the db.

    attributes do
      uuid_primary_key(:id)
  
      attribute :email, :ci_string do
        allow_nil?(false)
        public?(true)
      end
  
      attribute :hashed_password, :string do
        allow_nil?(false)
        sensitive?(true)
      end
  
      attribute :age, :string do
        allow_nil?(false)
      end
  
      attribute :full_name, :string do
        allow_nil?(false)
      end
      
      create_timestamp(:inserted_at)
      update_timestamp(:updated_at)
    end

these are my attributes in the resource file and i also created the action create that i’ll be using while submitting and it works but with only one field which is the first one

      defp render_step(1, assigns) do
        ~H"""
         <div class="flex flex-col flex-1">
          <%= for {student, index} <- Enum.with_index(@students) do %>
          <.live_component
            id={"students_form_add_#{index}"}
            module={Myapp.Students}
            student={student}
            changeset={@changeset}
          />
         <% end %>
          <button phx-click="add_student" class="border border-[#121212] rounded-lg 
     flex flex-row gap-2 py-1.5 px-3 cursor-pointer w-1/5 mt-4">
              <img src="/images/pluss.svg">
              <p class="text-sm text-nowrap"> <%= gettext("Add another student") %> 
            </p>
          </button>
        </div>
        """
      end

        @impl true
        def mount(_params, _session, socket) do
          {:ok,
           socket
           |> assign(students: [%{name: "", age: ""}]) 
           |> assign(
   changeset:
     Myapp.Accounts.Student
     |> AshPhoenix.Form.for_create(:create, forms: [auto?: true])
     |> to_form()
          )
          }
        end

      @impl true
      def handle_event("validate_students", %{"form" => params}, socket) do
        changeset = AshPhoenix.Form.validate(socket.assigns.changeset, params)
        {:noreply, assign(socket, changeset: changeset)}
      end

this render step, mount and the validation are in the liveview and the actual form is in a live_component because i was trying to loop over the live_component itself

        def render(assigns) do
          ~H"""
          <div class="flex flex-col flex-1 ml-5">
          <.form id="student_form" phx-change="validate_students" phx- 
     submit="save_students">
          <div class="flex space-x-4 items-center mb-4">
          <div class="mt-4 flex-1">
          <.input type="text" field={@changeset[:name]} label="Name" class="border-0 
   mt-1 block w-full focus:ring-[#FAFAFA] border border-[#FAFAFA] bg-[#FAFAFA] 
  rounded-lg px-2 py-3" placeholder="--"  />
          </div>
              <div class="mt-4 flex-1">
                <div class="relative">
                <.input type="text" field={@changeset[:age]} label="Age" class="border-0 
  mt-1 block w-full focus:ring-[#FAFAFA] border border-[#FAFAFA] bg-[#FAFAFA] 
  rounded-lg px-2 py-3" placeholder="--"  />
                <div class="absolute inset-y-0 pl-3 flex items-center">
                  </div>
                </div>
              </div>
          </div>
      
          <div class="flex justify-end gap-2 " id="buttons">
            <button  phx-click="previous_step" class="flex bg-[#F7F7F7] text-black px-4  
    py-2 mt-4 rounded-md items-end rounded-xl"> <%= gettext("Previous") %> 
  </button>
            <button
                type="submit"
                class="flex bg-[#1E1E20] text-white px-4 py-2 mt-4 rounded-md items-end 
   rounded-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
                >
                Save student
               </button>
                </div>
          </.form>
            </div>
          """
        end  

and this is the render in the live component. Can please anyone tell me how could i implement this specially the validation part. the for loop over the livecomponent it does add a form underneath the first however when I write in one it writes in all inputs with the same name.