How To Duplicate Search Form Elements and Add Unique IDs

I'm working on building a search form (here's the demo). Unfortunately, I've gotten to a point where I honestly have no idea how to do what I wan开发者_如何转开发t to do next.

I need to add functionality that will cause the Add Another City button to duplicate the State/Province and City SELECTs, which are populated with XML data by an Ajax call, but with unique IDs so the form can ultimately combine the search terms with multiple cities to produce the results of the search. Also, it should be able to add no more than 4 additional cities.

Can anyone at least point me in the direction of how I should start with this?

If I'm understanding, you don't really need to generate IDs for each created element, you can simply have a class and access them with that.

I threw this together to illustrate the idea:

http://jsfiddle.net/2SLrF/

Everything works entirely off of class.

NOTE: I went a little crazy on the chaining because it was quick and dirty, you'd probably want to separate it out a bit for maintainability.

If for some other reason you do need to generate IDs, you can simply create a counter variable and just append that to the end of the ID so that it's unique.

EDIT: The same example, expanded and commented. http://jsfiddle.net/2SLrF/1/