Remove and add part of editor form by javascript on select change

Hi..

I have a case where,
Default view of editor form has
- 5 static fields (whose name I know) + 1 select box
- 2 Dynamically generated input boxes (generated by Ajax response)

editor.add({
  'label' : ctf.field_name,
  'name'  : name
});

Now when user changes the select option... I want the above 2 dynamic fields to disappear and instead new dynamic fields (specific to selected option be shown)

The catch here is that, I dont know the Dynamic fieldNames so that I cant just use editor.clear(name);

I am trying to do something like this...

getCommodityTransactionFieldListForSauda = function(commodityId) {
    $.ajax({
           type: 'GET',
           url: base_url + 'api/commoditytransactionfield?transaction=Sauda&commodityId=' + commodityId,
           dataType: "json",
           async: true,
           success: function(cTFList){
              $.each(cTFList['data'], function(index, ctf) {
                  var name = 'ctf.' + ctf.commodity_transaction_field_id;

                  if (typeof editor.field(name) != 'undefined') {
                      editor.clear(name);
                  }

                  if (ctf.commodity_id == commodityId) {
                      editor.add({
                          'label' : ctf.field_name,
                          'name'  : name
                      });
                      //editor.field(name).update(ctf.field_value);
                  }

              });
           },
           error: function() {
              alert("System error. Please try again later.");
           }
        });
}

Kindly suggest a solultion for this...

I am thinking in terms of
- adding a parent DIV with dynamic fields as children of parent div and when the select option is changed remove the parent div entirely and add new parent div with new children
But I am not sure how that can be achieved....