Как использовать фильтр в каждом столбце таблицы

Question

Так что я хочу иметь фильтр ввода для каждого столбца в таблице. Я достиг фильтра для всей таблицы, но теперь я хочу иметь фильтр, который нацелен только на один столбец. Например, у меня есть таблица с 3 столбцами: Id, Name, Type, и я хочу иметь фильтр, подобный только для Id, фильтр только для имени и фильтр только для типа.

Это то, что я имею до сих пор:

const filterTable = (event) => {
    let filter = event.target.value.toUpperCase()
    let rows = document.querySelector("#jobTable tbody").rows

    for (let i = 0; i < rows.length; i++) {
        let firstCol = rows[i].cells[0].textContent.toUpperCase()
        let secondCol = rows[i].cells[1].textContent.toUpperCase()
        if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1) {
            rows[i].style.display = ""
        } else {
            rows[i].style.display = "none"
        }
    }
}

document.querySelector('#jobInput').addEventListener('keyup', filterTable, false)

А также, когда есть динамические данные (например, подключенные к API), фильтр также должен работать. Как я могу сделать, чтобы достичь этого?