Submit form data in modal and move to next modal flask bootstrap

Question

I have multiple bootstrap modals, and each modal has a form on it. When I click the next button ("weiter"), i also trigger the submit button on the form and collect this data on the server side. I then want to trigger the next modal to show. I can move between modals without clicking the form submit button, however when I use the form="form_1" attribute with my next button the modal closes and I am rerouted to the home page. I can't work out how to submit each modal form in turn without the modal closing whenever I submit. Here is the modal containing the first form:

<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form method="POST" enctype="multipart/form-data", id="form_1">
                                {{ form_1.csrf_token }}
                                <p>
                                    {{ form_1.optimise_option.label(class="form-label") }}
                                    {{ form_1.optimise_option(class="form-select form-select-sm") }}
                                </p>
                                {{ form_1.submit(class="btn btn-primary", id="form_1_submit") }}
                                <p id="test">This is some random text</p>
                            </form>
                        </div>
                        <div class="modal-footer">
                          <button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal" id="modal_1_confirm" form="form_1">Weiter</button>
                        </div>
                      </div>
                    </div>
                  </div>

The data-bs-target='#Modal_2_Toggle' is my next modal containing the second form, which I want to move to after submitting the first form.

In case needed here is my homepage route and form class (the route is incomplete since I am testing) :

class Form1(FlaskForm):

    optimise_option_choices = [
        'Möglichst viel Rendite erzielen -> Wirtschaftlichkeit', 
        'Möglichst viel Strom vom eigenen Dach -> Unabhängigkeit',
    ]

    optimise_option = SelectField(
        label='Worauf möchten Sie Ihre Anlage optimieren?', 
        choices=optimise_option_choices, 
        validators=[DataRequired()]
    )

    submit = SubmitField(
        label='SUBMIT'
    )

app.route("/", methods=(["POST", "GET"]))
def index_2(
    form_1=None,
    form_2=None
    ):
    if form_1 is None:
        form_1 = Form1()
    if form_2 is None:
        form_2 = Form2()
    return render_template("index_2.html", form_1=form_1, form_2=form_2)