Есть ли способ создать фильтр Javascript с переключателями и флажками?

Question

У меня есть эта задача, которая должна быть выполнена в ближайшее время, я пытался понять это в течение последних нескольких дней, но, к сожалению, я терпел неудачу каждый раз. Мне нужно создать фильтр, в котором пользователь может щелкнуть радиокнопку, чтобы получить эти конкретные курсы, после этого или даже раньше он может щелкнуть по флажкам, чтобы отфильтровать еще больше.

Мне удалось пройти «первую» часть фильтрации с помощью радиокнопок, самая большая проблема заключается в том, что я не могу фильтровать с помощью флажков, потому что, например, -> вы не можете выбрать 2 варианта из флажков.

Вот HTML

                    By subject:<br>
                    <form action="">
                            <input type="radio" name="name" value="Computing & IT">Computing & IT</input><br>
                            <input type="radio" name="name" value="Psychology & Sociology">Psychology & Sociology</input><br>
                            <input type="radio" name="name" value="Business & Management">Business & Management</input><br>
                            <input type="radio" name="name" value="Law & Criminology">Law & Criminology</input><br>
                            <input type="radio" name="name" value="Data Analytics">Data Analytics</input><br>
                            <input type="radio" name="name" value="Finance">Finance</input><br>
                            <input type="radio" name="name" value="Human Resource Management">Human Resource Management</input><br>
                            <!-- <input type="submit" value="Submit"> -->
                    </form>
                    <hr>
                    <h4> By Award:</h4>
                    <form action="">
                        <input type="checkbox" value="Postgraduate">Postgraduate</input><br>
                        <input type="checkbox" value="Undergraduate">Undergraduate</input><br>
                        <input type="checkbox" value="Top-Up">Top-Up</input><br>
                    </form>

а вот JS

fetch("https://api.myjson.com/bins/1axsrs")
.then(response => response.json())
.then(data =>  {
    let api_array = data.name;
    let radio = document.querySelectorAll('input[type=radio]');
    let checkboxes = document.querySelectorAll('input[type=checkbox]')
    api_array.map(item => {
        document.getElementById('app').innerHTML +=
        `<div class="card">
        <h6>${item.vertical}</h6>
        <h4>${item.program}</h4>
        <p>${item.level}</p>
        <button class="myButton">Enquire Now</button>
        `
    })
    for(let select of radio) {
        select.addEventListener('click',() => {
            document.getElementById('app').innerHTML = "";
            let api_array = data.name.filter(e => e.vertical === select.value)
            api_array.map(item => {
                document.getElementById('app').innerHTML +=
                `<div class="card">
                <h6>${item.vertical}</h6>
                <h4>${item.program}</h4>
                <p>${item.level}</p>
                <button class="myButton">Enquire Now</button>
                `
            })
            for(let check of checkboxes) {
                check.addEventListener('change',() => {
                    document.getElementById('app').innerHTML = "";
                    if(check.checked) {
                    let chosen = api_array.filter(c => c.level === check.value)
                    chosen.map(item => {
                        document.getElementById('app').innerHTML +=
                        `<div class="card">
                        <h6>${item.vertical}</h6>
                        <h4>${item.program}</h4>
                        <p>${item.level}</p>
                        <button class="myButton">Enquire Now</button>
                        `
                    })
                    } else {
                    }
                }) 
            }
        })
    }
})