test.html

async function getSections(grade=0) {
    document.querySelector("#sectionGrade").value = "";
    document.querySelector("#sectionName").value = "";
    setVisibility(document.querySelector("#sectionError"), false)
    let res = await GET("getSections", {grade:grade});
    if(resCheck(res, "GET")){
        if(grade!=0){document.querySelector(`#grade${grade}-Sections`).innerHTML = ''}
        res.forEach(item => {
            document.querySelector(`#grade${item.grade_level}-Sections`).innerHTML += `
            <li class="list-group-item list-group-item-action d-flex pe-1 justify-content-between" id="section-${item.ID}">
                <div class="test-truncate align-self-center"><small> ${item.section_name} </small></div>
                <div class="btn btn-danger px-1 text-white ms-2 p-0" onclick="sectionDelete(${item.grade_level}, '${item.section_name}', ${item.ID})"><small><i class="bi bi-trash-fill"></i></small></div>
            </li>`;
        });
    }else{console.log(res)}
}

async function setNewSection(){
    let grade = document.querySelector("#sectionGrade").value;
    let section = document.querySelector("#sectionName").value;
    let error = document.querySelector("#sectionError");
    let errorMsg = document.querySelector("#sectionErrorMsg");
    let successMsg = document.querySelector("#classSuccessMsg");
    if(grade && section){
        let res = await POST({
            func: "setNewSection",
            grade: grade,
            section: section
        });
        if(resCheck(res, "POST")){
            classModalSuccess.show()
            successMsg.innerText = `${section} successfully added to Grade ${grade}`;
            getSections(grade);
            setVisibility(error, false);
        }else{
            errorMsg.innerText = "Something went wrong"
            setVisibility(error, true);
        }
    }else{
        setVisibility(error, true);
    }
}

function sectionDelete(grade, name, ID) {
    document.querySelector("#classDeleteMsg").innerHTML = `Are you sure you want to remove <i> ${name}</i> from Grade ${grade}?`;
    document.querySelector("#classDeleteMsg").setAttribute("onclick", `setSectionDelete(${ID},'${name}',${grade})`)
    classModalDelete.show()
}

async function setSectionDelete(ID, name, grade) {
    let successMsg = document.querySelector("#classSuccessMsg");
    let res = await POST({
        func: "setSectionDelete",
        ID: ID
    })
    if(resCheck(res, "POST")){
        classModalSuccess.show();
        successMsg.innerText = `${name} successfully removed from Grade ${grade}`;
        document.querySelector(`#section-${ID}`).remove()
        getSections(grade);
    }else{console.log(res)}
}