I'm working on a web form that includes a table where users can add rows. The first row of the table has dependent dropdowns populated with JSON data from an external file. Check out the code snippet below:
// Function to add a new row
$(function(){
var newgroup = $('<tr>').addClass('rec-rows');
$('#addRow').click(function(e){
e.preventDefault();
$('.rec-rows').first().clone().appendTo(newgroup).appendTo('#details');
});
});
// onChange function for dropdown selection
$(".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>"
}
});
}
Although theoretically, each added row should work independently with the onChange code, in reality, the values are getting updated on the first row instead of the specific one. Here is the initial setup of the table:
<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 would appreciate any guidance or support to fix this issue and have the code function as intended - allowing for independent dropdown updates on each row. Thank you for your help.