Help with filter function

Hi All

I need help with my java script filter function
I want to filter Vets ‘services’ & ‘specialty’
I have added my code

class VetsView {

init() {

    document.title = 'Vets'

    this.vets = null

    this.render()

    Utils.pageIntroAnim()

    this.getVets()

}

// ------filter--------------------------------------------------------

async filterVets(field, match) {

        if (!field || !match) return

            // validate

            // get fresh vets

        this.vets = await VetAPI.getVets()

            // set variable

        let filteredVets

        // service-------------------------------------------------------

        if (field == 'service') {

            const service = ['Specialtist', 'General Vet'];

            filteredVets = this.vets.filter(vet => vet.service == match)

            this.vets = filteredVets

            this.render()

        }

        // }

        // specialty ---------------------------------------------------- 

        if (field == 'specialty') {

            filteredVets = this.vets.filter(vet => vet.specialty == match)

            this.vets = filteredVets

            this.render()

        }

    }

    // clear filters button function

clearFilters() {

    this.getVets()

    this.clearFilterBtns()

}

// get vets

async getVets() {

    try {

        this.vets = await VetAPI.getVets()

        console.log(this.vets)

        this.render()

    } catch (err) {

        Toast.show(err, 'error')

    }

}

// clear filter btns

clearFilterBtns() {

    const filterBtns = document.querySelectorAll('.filter-btn')

    filterBtn.forEach(btn => removeAttribute("type"))

}

// handler button

handleFilterBtn(e) {

    console.log(e.target)

        // clear btns

    this.clearFilterBtn()

    // set button active

    e.target.setAttribute("type", "primary")

    const field = e.target.getAttribute("data-field")

    const match = e.target.getAttribute("data-match")

        // extract field and match from buttoms

    console.log("field = ", field)

    console.log("match = ", match)

    // filter vets

    this.filterVets(field, match)

}

async getVets() {

    try {

        this.vets = await VetAPI.getVets()

        console.log(this.vets)

        this.render()

    } catch (err) {

        Toast.show(err, 'error')

    }

}

render() {

        const template = html `
        <sl-button class="filter-btn" size="small" data-field="service" data-match="generalvet" @click=${this.handleFilterBtn.bind(this)}>General Vet</sl-button></sl-button>

        <sl-button class="filter-btn" size="small" data-field="service" data-match="specialist" @click=${this.handleFilterBtn.bind(this)}>Specialist</sl-button></sl-button>

        </div>

    <div>

        <strong>Pet</strong>

    </div>

        <div>

        <sl-button class="filter-btn" size="small" data-field="specialty" data-match="cat" @click=${this.handleFilterBtn.bind(this)}>Cat</sl-button>

        <sl-button class="filter-btn" size="small" data-field="specialty" data-match="dog" @click=${this.handleFilterBtn.bind(this)}>Dog</sl-button>

        <sl-button class="filter-btn" size="small" data-field="specialty" data-match="rabbit" @click=${this.handleFilterBtn.bind(this)}>Rabbit</sl-button>

        <sl-button class="filter-btn" size="small" data-field="specialty" data-match="bird" @click=${this.handleFilterBtn.bind(this)}>Bird</sl-button>

        <sl-button class="filter-btn" size="small" data-field="specialty" data-match="mouse" @click=${this.handleFilterBtn.bind(this)}>Mouse</sl-button>

        <sl-button class="filter-btn" size="small" data-field="specialty" data-match="reptile" @click=${this.handleFilterBtn.bind(this)}>Reptiles</sl-button>

        </div>

        <div>

            <sl-button size="small"  @click=${this.clearFilters.bind(this)}>Clear</sl-button>

        </div>