<select class="progress-filter filter-select-wrapper select-wrapper np-button" style="border-radius: 8px;" onChange="filterLPs()">
    <option selected disabled hidden>All Learning Paths</option>
    <option value="a">All Learning Paths</option>
    <option value="n">Not Started</option>
    <option value="i">In Progress</option>
    <option value="c">Completed</option>
</select>

<script>
    let filterLPs = () => {
        console.log(event.target.value) //i
        let filterValue = event.target.value;
        let allLPs = document.querySelectorAll('.learning-path-card');

        console.log(allLPs);
        allLPs.forEach((lp) => {
            let lpProg = lp.dataset.progress;
            let hide = false;

            if(filterValue == 'n'){
                if(lpProg > 0){
                    hide = true;
                } 
            } else if (filterValue == 'i'){
                if(!(lpProg > 0 && lpProg < 100)){
                    hide = true;
                } 
            } else if (filterValue == 'c'){
                if(!lpProg != 100){
                    hide = true;
                }
            }

            if(hide){
                lp.style.display = 'none';
            } else {
                lp.style.display = 'block';
            }
        })
    }
</script>