php - how make a filter for each table column?

Question

Currently I have to filter on all the content of the table, since the filter is done for each row, what I am looking for is to be able to have an input on each column and search in that particular column. I attach the code on how I currently have it. I hope you can help me. Thanks a lot

TABLE

<div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">Quick Search</span>
                </div>
                    <input id="filterContent" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                </div>
<table class="table table-striped table-bordered table-sm text-center" style="width:100%; margin:auto;">
            <thead class= "text-center table-info">
                <tr>
                    <th>#</th>
                    <th>Customer</th>
                    <th>Phone 1</th>
                    <th>Phone 2</th>
                </tr>
            </thead>
            <tbody class="quickSearch">
            <?php foreach($users as $user):
                $counter++ ?>
                    <tr class="text-center">
                        <td><?= $counter; ?></td>
                        <td><?= $user['CUSTOMER'] ;?></td>
                        <td><?= $user['PHONE_1'] ;?></td>
                        <td><?= $user['PHONE_2'] ;?></td>
                    </tr>
            <?php endforeach; ?>
            </tbody>
        </table>

SCRIPT

<script type="text/javascript">
        $(document).ready(function () {
        (function($) {
            $('#filterContent').keyup(function () {
                    var searchValue = new RegExp($(this).val(), 'i');
                    $('.quickSearch tr').hide();
                    $('.quickSearch tr').filter(function () {
                        return searchValue.test($(this).text());
                    }).show();
                        })
            }(jQuery));
        });
    </script> 

Answer 1

For this you can add a new table row before the foreach, something like that.

<tbody class="quickSearch">
    <tr>
        <td></td>
        <td><input type="text" name="filter[CUSTOMER]" placeholder="Customer Filter" /></td>
        <td><input type="text" name="filter[PHONE_1]" placeholder="Phone 1 Filter"</td>
        <td><input type="text" name="filter[PHONE_2]" placeholder="Phone 2 Filter"</td>
    </tr>
    <?php foreach($users as $user): $counter++ ?>
    <tr class="text-center">
        <td><?= $counter; ?></td>
        <td><?= $user['CUSTOMER'] ;?></td>
        <td><?= $user['PHONE_1'] ;?></td>
        <td><?= $user['PHONE_2'] ;?></td>
    </tr>
    <?php endforeach; ?>
</tbody>

And for each input you can filter the results by column modifying the script.