Dependent Drop Downs

[devender1298]

$(document).ready(function () {
var item = getBrand();
var item2 = getLot(Brand);
var item3 = getLocation();
});
function getBrand()
{
google.script.run.withSuccessHandler(
function (data) { //01
var Options="";
$.each(data, function(key, value) //02
{
Options = Options + '<option>' + value + '</option>'; //03
});
$(".brandname").append(Options); //04
}).getBrandList();
}



function getLot(Brand)
{
google.script.run.withSuccessHandler(
function (data) { //01
var Options="";
$.each(data, function(key, value) //02
{
Options = Options + '<option>' + value + '</option>'; //03
});
$(".basnonbas").empty().append('<option>-Select Lot-</option>');
$(".basnonbas").append(Options); //04
}).getLotList(Brand);
}
function getLocation(Lot)
{
google.script.run.withSuccessHandler(
function (data) { //01
var Options="";
$.each(data, function(key, value) //02
{
Options = Options + '<option>' + value + '</option>'; //03
});
$(".qualitydes").empty().append('<option>-Select Location-</option>');
$(".qualitydes").append(Options); //04
}).getLocationList(Lot);
}


</script>



<script>
function BtnAdd() {
var v = $("#TRow").clone().appendTo("#TBody");
$(v).find("input").val('');
$(v).find("th").first().html($('tr').length - 2);
}




Html Code is below :-


now the issue is this whenever I click on + button to add cloned row and after this changes any of the drop down values in an row then all other rows getting rest automatically while I am expecting that each cloned row should work independently with dependent drop downs.

 

[VBService]

Html Code is below :-

where?