مقدار بازگشتی از چک باکس به جدول

من صفحه ای دارم که میخوام با استفاده از چک باکس ها و جدول ها نمایش  و مخفی بشوند. یعنی دوتا چک باکس داریم به نامهای بانوان و آقایان. وقتی چک باکس آقایان را زد داخل جدول تمامی مربی هایی که آقا هستن را نمایش بدهد و اگر  چک باکس بانوان را زد داخل جدول تمامی مربی هایی که خانم هستن را نمایش بدهد من کد را نوشتم درست کار میکنه فقط یه مقدار کد من کثیف و غیر استاندارد است حال میخواهم شما کد را تمیزتر و استاندارد کنید

    @extends('Home.master')
    
    @section('script')
        <script>
            $(document).ready(function(){
                $("#txt_search").on("keydown keyup", function() {
                    var value = $(this).val().toLowerCase();
                    $("table#tbl_search").filter(function() {
                        if(!parseInt(value))
                            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                        else
                            $(this).slideUp();
                    });
                });
                var tableRows = $('.column.left tbody tr'),
                    filterBoxes = $('.column.right :checkbox').on('change', filterTable);
    
                function filterTable() {
                    var filter_selector = '';
                    $('.column.right :checked').each(function() {
                        filter_selector += '[' + $(this).attr('name') + '=' + '"' + $(this).val() + '"]';
                    });
                    if (filter_selector.length < 1) {
                        tableRows.show();
                    } else {
                        tableRows.hide().filter(filter_selector).show();
                    }
                }
            });
            // $(document).ready(function(){
            //     $("#txt_search").on("keydown keyup", function() {
            //         var value = $(this).val().toLowerCase();
            //         $("table#tbl_search #tbl_tbody tr").filter(function() {
            //             if(!parseInt(value))
            //                 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            //             else
            //                 $(this).slideUp();
            //         });
            //     });
            // });
    
            $('#ladies').on('click', function () {
                if($(this).is(':checked') && $('#gentleman').is(':checked')){
                    $('div#gender_0').css('display','block');
                }
                else if($(this).is(':checked')){
                    $('div#gender_1').css('display','none');
                }
                else if(!$(this).is(':checked') && $('#gentleman').is(':checked'))
                    $('div#gender_0').css('display','none');
                else if(!$(this).is(':checked') && !$('#ladies').is(':checked')){
                    $('div#gender_1').css('display','block');
                    $('div#gender_0').css('display','block');
                }else
                    $('div#gender_1').css('display','block');
    
            });
            $('#gentleman').on('click', function () {
                if($(this).is(':checked') && $('#ladies').is(':checked')){
                    $('div#gender_1').css('display','contents');
                }
                else if($(this).is(':checked')){
                    $('div#gender_0').css('display','none');
                }
                else if(!$(this).is(':checked') && $('#ladies').is(':checked'))
                    $('div#gender_1').css('display','none');
                else if(!$(this).is(':checked') && !$('#ladies').is(':checked')){
                    $('div#gender_1').css('display','block');
                    $('div#gender_0').css('display','block ');
                }
            })
        </script>
    @endsection
    @section('contents')
    
        <div class="container">
    
            <input class="form-control mr-auto col-md-4 float-left" id="txt_search"  type="text" placeholder="{{ __('message.content.search') }}...">
            <div class="float-left ml-3 mt-2 column right">
                <label for="ladies">{{ __('message.coaches.ladies') }}</label>
                <input type="checkbox" id="ladies" name="gender" value="0">
                <label for="gentleman">{{ __('message.coaches.gentleman') }}</label>
                <input type="checkbox" id="gentleman" name="gender" value="1">
            </div>
            <h2 class="mt-3 mb-3">{{ __('message.menu.coaches') }}</h2>
            <div class="row">
                @foreach($coaches as $coach)
                    <div class="table-responsive" id="gender_{{ $coach->gender }}">
                        <table id="tbl_search" class="table">
                            <tr>
                                <td rowspan="2"><img class="img-fluid" width="120px" src="{{ asset('public/images/coaches/'.$coach->image) }}"></td>
                                <th>نام و نام خانوادگی</th>
                                <th>سمت</th>
                                <th>درجه مربی</th>
                                <th>درجه داوری</th>
                                <th>دان</th>
                                <th>تلفن</th>
                            </tr>
                            <tr>
                                <td class="nameTbl">{{ $coach->first_last_name }}</td>
                                <td class="roleTbl">{{ $coach->side }}</td>
                                <td>{{ $coach->coach_degree }}</td>
                                <td>{{ $coach->referee_degree }}</td>
                                <td>{{ $coach->don }}</td>
                                <td>{{ $coach->telephone }}</td>
                            </tr>
                            <tr>
                                <th>آدرس</th>
                                <td colspan="6">{{ $coach->address }}</td>
                            </tr>
                        </table>
                    </div>
                @endforeach
            </div>
        </div>
    
    @endsection