Button's color won't be changed after enabled

Ask the community
,
1

button’s background color can’t be changed after I enable button and change its background color. Can anyone take a look at my code.

let btnAndBoxArr = [{
        btn: '#1stWeekBtn',
        workshopTitle: '#1stWeekTitle',
    },
    {
        btn: '#2ndWeekBtn',
        workshopTitle: '#2ndWeekTitle',
    },
    {
        btn: '#3rdWeekBtn',
        workshopTitle: '#3rdWeekTitle',
    },
    {
        btn: '#4thWeekBtn',
        workshopTitle: '#4thWeekTitle',
    }
];

$w.onReady(async function () {
    answerDatasetOninit();
});

function answerDatasetOninit() {
    const answerDataset = $w('#answerDataset');
    answerDataset.onReady(async () => {
        const answerItems = await answerDataset.getCurrentItem();
        //$w('#1stWeekBtn').collapseIcon();
        btnAndBoxArr.map(async (btnObj) => {
            let btn = btnObj.btn;
            const weekNo = await getNumInString(btn);
            $w(btn).collapseIcon()
            const workshop = await wixData.query("WorkshopStatus")
                .eq("batchNo", answerItems.batchNo)
                .eq("weekNo", weekNo)
                .find()
                .then((results) => {
                    return results.items[0];
                })
            await checkWorkshopStatus(workshop, btn)
        })
    })
}

async function checkWorkshopStatus(workshop,btn,weekNo) {
    if (workshop != null) {
        if (workshop.status == "Pending") {
            console.log("Pending");
            await $w(btn).enable();
            await $w(btn).expandIcon();
            $w(btn).icon = pendingSvg
            $w(btn).style.backgroundColor = pendingColor;
        }
    }
}