Form inside a Form

Recently I broke production during a customer on-boarding call because I implemented a form inside a form. Seemed pretty straight forward to me and it was but I just missed out on a keen detail.

Also, just an FYI, the customer ended up opening the developer console to try and debug why the form wasn't working. Yeah... it wasn't a good day for me.

Anyway, the solution is pretty simple.

TLDR: Set id to form and set form attribute to your button.

<form id="first">
    ...
</form>
>     <form id="second">
    ...
        <button type="submit" form="second">Submit Second</button>
    </form>
<button type="submit" form="first">Submit First</button>