Edit a record added on the page
I have a page where optionally the user can add items that will appear on the table that will then be submitted to the server. The user may remove items added to the table, or they can choose to edit the record. I have provided screenshots of a mockup that heavily simplifies the type of page that I am building.
My issue is that I am trying to decide how best to handle the edit process, since it happens within the same page rather than records already submitted to the server. I have a few options in mind.
The first option would be that the edited record would take over the form that is used to add the items in the first place. This would mean that whatever items were already typed into the boxes by the user would need to be saved for when editing has finished. One of the screenshots provided shows an example of this.
One reason I think this could work is due to the highlighting I think it's quite obvious which record is being amended, and forces the user to have to deal with that edited item before continuing. However, the downside as I see it is that it is taking control of another area of the page which is solely for the purpose of adding items to the table.
Another idea I had was to force a dropdown area underneath the record in the table and provide an edit area. I have provided a mockup of this idea as well. You may be wondering why not just add form control to the table row itself and the reason is that in the real application there are conditional fields via a radio button that is provided so the form is actually slightly more complicated than shown, but I left it out just to keep the mockup simple.
This method I think is quite clean in the respect that it keeps the editing away from the form responsible for adding, but I'm personally not a fan of dynamically moving tables, and also I am essentially just duplicating the input fields that the form already has anyway.
My last option which I haven't provided a mockup for (but can if required) is the idea of presenting a modal dialog with the same input fields that the form has. Again the plus side of this is that it extracts the editing process away from the adding form but I'm not sure whether presenting a new window to the user like this would be appropriate for editing.
Which would be the best from an experience perspective to a user potentially wanting to edit the table records, and if none of what I've mentioned would be appropriate how can this be approached?