jquery add table row with json data in dropdowns

I have a web form with a table that the user can add additional rows to. The first row of the table consists of dependent dropdowns. The dropdowns are populated with json data from a referenced file. The code that I am using for it is as follows:

//the add row function
$(function(){
var newgroup = $('<tr>').addClass('rec-rows');
$('#addRow').click(function(e){
    e.preventDefault();
$('.rec-rows').first().clone().appendTo(newgroup).appendTo('#details');     }); 

});

//onChange function
$(".rec-rows #section").live('change',function(){


var sSec =$(this).parent().find('#section').val();  

$("#divParts").hide();
$("#divDesc").hide(); 
$("#divGroup").hide(); 
if(sSec=="select") {
$("#divCategory").hide();
} else {
$.getJSON("static/site_category.json",  function(json) {
var catJson = json[sSec];
var options = "<option value=\"开发者_高级运维select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"
}

Theoretically, a new row is added and the onChange code I pasted will work for each additional row. However, the results are not like that at all. Instead, when the row is added and the user makes a selection on the new row, the values are updated in the first row.The first part of the table looks like this:

<td width="" align="left"> 
<div>
<select id="section" name="section" style="margin-top:15px;"> 
<option value="select">Select Area</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
</select> 
</div> 
</td> 

I appreciate any help to get this code working as desired - which would be a simple added row where the dropdown selections only update on the row that they are found on. Thank you.

---

you can look at my answer here of how to add a row dynamically to the start of a table:

How can I dynamically generate a table row with it's tds?

It might help you here.

or i also i see a problem.

change $("#section").change(

to:

$("#section").live('change',...

that could be why the new dropdowns are not working

---

Got the solution! I was advised to declare the parent such as in the following context:

$(".section").change( function () {
var sSec =$(this).val();  
context = $(this).parents("tr");
if(sSec=="select") {
$("#divCategory", context).hide();
} else {
$.getJSON("static/site_category.json",  function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"

Now for every "add row" click, a row gets added and the dropdowns are changed upon user selection for that row and only that row.