Sorry i missed this months ago.
Thanks for the video. It's not exactly what i had in mind. understandably, the JS is simple enough.
Consider the option is the name of another 'product'. The product has a full suite of meta and details that need to be added.
So, the idea would be to pop the other modal, fill out product 2 form, save, close, and return the new element to the original modal.
So, to take your example, I want to add more than just Kiwi to my select list. Rather, I want to DEFINE Kiwi.
Name: Kiwi
color: Green
cat: citrus
size: small
etc etc etc
And all of that would exist on a "Fruit" table.
So, if i were looking at Farmer's Fruit Market page
Add New would pop a modal to add a new Vendor.
We begin to input Farmer Joe into the vendor table and one of the options is what fruit do they sell?
Oh No! Kiwi is not an option, yet!
So, similar to your example above i would like to add Kiwi to the option list. But as above, i have a page similar to the Vendor Add which allows to create new fruit in the database. So, i would like to pop that modal up to add Kiwi and all its data, save it to the db, and onsuccess, return the rowid (unique) and name for the original modal to be added back to the JS as per your video example.
In theory, this could be infinite, as for example, perhaps Green isn't in the 'colors' table yet and needs to be added.
and maybe green has attributes hue, saturation, etc etc
and citrus isn't in the category table yet
i think you get the idea.
modals calling modals and returning the stack back to the opener.