Filter List or Library by more than 2 fields

I am trying to filter a list or library by more than 2 fields. It is working about half the time and erroring about half the time. Not sure what i am doing wrong. i am following this link (Filter List or Library by CAML in a SharePoint form — SharePoint forms). My code is below.

var dt = fd.control('SPDataTable1');
dt.ready().then(function() {
    filterDT();
}); 

//filter List or Library with new value when Search field changes
//filterDT();
fd.field('Choice1').$on('change', function(){
    filterDT();
});
fd.field('Group').$on('change', function(){
    filterDT();
});


function filterDT(){
    
    var filter = "<And>";
    filter += "<Eq><FieldRef Name='Approver'/><Value Type='Text'>Approver 1</Value></Eq>";
    filter += "<Contains><FieldRef Name='Approval1Result'/><Value Type='Text'>"
        + fd.field('Choice1').value + "</Value></Contains>";
    filter += "</And>";
    dt.filter = filter;
    var filter2 = "<And>";
    filter2 += dt.filter;
    filter2 += "<Contains><FieldRef Name='Group'/><Value Type='Text'>"
        + fd.field('Group').value + "</Value></Contains>";
    filter2 += "</And>";
    dt.filter = filter2;
    dt.refresh();
}

Dear @Ckreuter,
It should definitely be just one filter, not two, you're overwriting an existing filter with that.

Try it like this:

var dt = fd.control('SPDataTable1');
dt.ready().then(function() {
    filterDT();
}); 

//filter List or Library with new value when Search field changes
//filterDT();
fd.field('Choice1').$on('change', function(){
    filterDT();
});
fd.field('Group').$on('change', function(){
    filterDT();
});


function filterDT(){
    var filter = "<And>";
    filter += "<Eq><FieldRef Name='Approver'/><Value Type='Text'>Approver 1</Value></Eq>";
    if(fd.field('Choice1').value){
        filter += "<Contains><FieldRef Name='Approval1Result'/><Value Type='Text'>"
        + fd.field('Choice1').value + "</Value></Contains>";
    }
    if(fd.field('Group').value){
        filter += "<Contains><FieldRef Name='Group'/><Value Type='Text'>"
        + fd.field('Group').value + "</Value></Contains>";
    }
    filter += "</And>";
    dt.filter = filter;
    dt.refresh();
}

That did not work for me but i was able to get it to work doing it like this.

  ListorLibrary();
  fd.field('Choice1').$on('change',ListorLibrary);
  fd.field('Group').$on('change',ListorLibrary);
var dt = fd.control('SPDataTable1');
dt.ready().then(function() {
    filterDT();
});

//filter List or Library with new value when Search field changes
//filterDT();
fd.field('Choice1').$on('change', function(){
    filterDT();
});
fd.field('Group').$on('change', function(){
    filterDT();
});


function filterDT(){
    var filter = "<And>";
    filter += "<Eq><FieldRef Name='Approver'/><Value Type='Text'>Approver 1</Value></Eq>";
    filter += "<Contains><FieldRef Name='Approval1Result'/><Value Type='Text'>"
        + fd.field('Choice1').value + "</Value></Contains>";
    filter += "</And>";
    dt.filter = filter;
    dt.refresh();
}
function ListorLibrary(){
var dt = fd.control('SPDataTable1');
dt.ready().then(function() {
    filterDT();
});

function filterDT(){
    var filter = "<And>"
    //add existing filter value
    filter += dt.filter;
    //add your own filtering conditions
    filter += "<Contains><FieldRef Name='Group'/><Value Type='Text'>"
        + fd.field('Group').value + "</Value></Contains>";
    filter += "</And>"
    //apply filtering
    dt.filter = filter;
    dt.refresh();
}

}