Multiple forms and sub-tables in a single view

I think you are conflating separate concerns here and obviously it is causing issues. This may be to the abstract nature of your example, but in a real situation this would not arise.

As a user, my name and email address is not going to change during an order, but my order might and probably will, as I fiddle with quantities and products etc.

As a user, my name and email would come after I have built my order together, unless I am not a new user and logging in to my account, in which case you would know them anyway and again they are unlikely to change very often.

I would expect to build my order in my shopping cart before proceeding to give my details, delivery addresses and finally payment. Why you would have a combined form where I can fiddle with the order and my details on the same page I have no idea. So this problem disappears once it is placed into a real world context.

Having said all that, I would build the order in a temporary order table, and only when the order was confirmed later in a confirmation screen would I write the order to a confirmed order table and remove it from the temp table. Once an order is confirmed there should be no way to edit it by the user.

Finally with your first side by side example, I would disable (or even hide it entirely) the button 'save details' until they have changed. Then you need a new button below the two sections to 'Confirm Order and Details and Proceed', perhaps with some explanatory text. I would make this button bold, green and stand out obvious, whilst the other two buttons more minor, greyish, less stand out buttons (like sub-buttons).

So three buttons, one to save details, one to add products and a third to confirm and proceed.

Hope that helps,

Paul