I am novice to jQuery, and I had to do some small jQuery job at my hand, but i am unable to make it work.

The thing is, the exisiting code is generating a modal popup containing table rows, with Option element(op1) which gets its data from DB, But I am adding a small filter to that Option value, So When I add a new Option element on its change, it just add to the first row, and not to current row.

 

For instance the modal popup have 5 table rows to enter data for 5 people, and there is a dropdown for Country and i have added drop down for city,(which is working logically for the click of country drop down) , and it works very fine for the first person, but when i click on the 2nd country drop down for 2nd person, it re-initialize the first city drop down and does not display the city drop down adjacent to the clicked country drop down, and so on for all remaining 4 city drop down.

 

I checked the source , it contains the city dropdown but dont display it.

 

So my question is why it is adding to the first row?

 

Thanks in advance.