Creating Dynamic Selectboxes When Button Pushed

I'm trying to do the following thing. Create a dynamic selectboxA0 when a button is pushed. Then, when a value is selected in this selectboxA0, there will be dynamically generated another selectboxB0 with content which is different for each option of the first selectboxA0. When the button is pressed another time SelectboxA1 is generated (which will in his turn generate SelecboxB1).

The code I use is the following:
function addProduct(){
var url = "includes/php/catalog/loadcategories.php";
$.post(url,
function(data){
$('<tr id="catalogid'+invoiceProducts+'"><td>Product-categorie</td><td><select name="category'+invoiceProducts+'" id ="category'+invoiceProducts+'">'+data+'</select></td></tr>').appendTo('#invoiceTable');
$("#category"+invoiceProducts).change(
function(){
var currentCatalogField = $("#category"+invoiceProducts).attr("name");
if($('#product'+invoiceProducts).length > 0){
var currentProduct = $('#product'+invoiceProducts);
var category = $('#category'+invoiceProducts).val();
var selectbox = true;
productSelect(category, selectbox);
}else{
var category = $('#category'+invoiceProducts).val();
var selectbox = false;
productSelect(category, selectbox);
}});}, "html");
invoiceProducts++;
}

The problem I have is that everything revolves around a counter (var invoiceProducts). Therefor when I select a value in SelectboxA0, the value of SelectboxB1 will change (instead of B0). Any way to solve this thing, by for example making the object pass itself when it calls the onchange function so I can get the number out of the name/id attribute or something. A