Dynamic search form with modal child form

With behaviour a little like the example here: http://ift.tt/1gSFjht I need allow my users to dynamically build search criteria using modal dialogs, and I'm struggling to work out how exactly I would achieve this.

My requirement is to have a search bar containing common criteria (Foo and Bar in the example below).

When the user clicks "Add" then a modal will present another form. All of the of the modal form selections, which in itself is quite complex, will need to be saved to the search criteria and included in the POST data when the user clicks submit.

<form>
  <label for="foo">Foo</label>
  <input type="text" id="foo" />
  <label for="bar">Bar</label>
  <input type="text" id="bar" />
  <p>Dynamic part here. <a href="#">[Add]</a></p>

  <ul>
    <li>Dynamic Part 1 <a href="#">[Del]</a></li>
    <li>Dynamic Part 2 <a href="#">[Del]</a></li>
    <li>Dynamic Part X <a href="#">[Del]</a></li>
  </ul>

  <input type="submit" id="submit" />
</form>

Question:

Being a lone developer, I'm just interested in hearing how others may approach this. Currently I'm thinking of serialising the modal form selections to hidden fields in the form, which will then be posted up as an array - although I'm not exactly sure how I do that just yet!

I'm probably going to be using jQuery, but would be interested if someone says "X Framework would make this a walk in the park".

Any advise appreciated.