Front-end design: Dynamically add items to list

So, I've tried several times to thrust myself into the world of website development. Each time, I have abandoned a project for one simple reason: lists.

I would like to know, from front to back, the dataflow for a system which follows the following sequence of events:

1. The user is shown a list in a website
2. The user fills out a new list item in some sort of modal dialog
3. The user hits "Submit" and that item is now added to the list.
   • That new list item is sent to the server to be stored

Would there be a whole new page load? When would the data be posted to the server? What are the various options for this (seemingly simple) application? I am targeting relatively small web tools. Not necessarily single page, but I'm not against it.

I understand how to add the new <li> to a list with JQuery, and I know how to build the modal with HTML. I can pull the data from the modal, but I'm not sure how to take that data from JQuery, turn it into the appropriate block of HTML (which could be rather complex), and store the new record in the database. I can't seem to find a tutorial on this sort of data handling.

Thank you!