Необходимо создать функцию фильтра для радио

Question

У меня есть боковая панель с rad ios для фильтрации и раздел справа, содержащий разделы. Я хочу создать функцию фильтрации или способ фильтровать то, что там есть. Я прочитал здесь много сообщений, в которых go делал это, но ни одна из них не работает для меня, или они используют таблицы.

HTML для rad ios:

<main class="container-fluid flex-fill my-margin">
      <div class="container">
            </br>
            <input class="form-control" id="myInput" type="text" placeholder="Search..">
            </br>
            <div class="row">
                <div class="col-sm-2 bg-light">
                  
                      <h1><small>
                        Filters
                      </small></h1>
                      
                      <button type="button" class="btn" id="subjectBtn">
                      <h6>Subject <i class="fas fa-filter"></i></h6>
                      </button>
                      <span id="subjectPanel" class="subjectFilters" style=display:none>
                      
                        <div class="form-check">
                          <label class="form-check-label" for="subject">
                              <input type="radio" class="form-check-input" id="subject" name="subject" value="all" data-filter="*" checked>All
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="subject">
                              <input type="radio" class="form-check-input" id="subject" name="subject" value="writing" data-filter=".writing">Writing
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="subject">
                              <input type="radio" class="form-check-input" id="subject" name="subject" value="reading" data-filter=".reading">Reading
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="subject">
                              <input type="radio" class="form-check-input" id="subject" name="subject" value="science" data-filter=".science">Science
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="subject">
                              <input type="radio" class="form-check-input" id="subject" name="subject" value="math" data-filter=".math">Math
                          </label>
                        </div>
                      </span>

                      <button type="button" class="btn" id="gradeBtn">
                      <h6>Grade <i class="fas fa-filter"></i></h6>
                      </button>
                      <span id="gradePanel" style=display:none>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="all" checked>All
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="1">1st
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="2">2nd
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="3">3rd
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="4">4th
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="5">5th
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="6">6th
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="7">7th
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="8">8th
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="9">Freshman
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="10">Sophmore
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="11">Junior
                          </label>
                        </div>
                        <div class="form-check">
                          <label class="form-check-label" for="grade">
                              <input type="radio" class="form-check-input" id="grade" name="grade" value="12">Senior
                          </label>
                        </div>
                      </span>

                      <button type="button" class="btn" id="virtualBtn">
                        <h6>Virtual <i class="fas fa-filter"></i></h6>
                        </button>
                        <span id="virtualPanel" style=display:none>
                          <div class="form-check">
                            <label class="form-check-label" for="subject">
                                <input type="radio" class="form-check-input" id="virtual" name="virtual" value="none" checked>None
                            </label>
                          </div>
                          <div class="form-check">
                            <label class="form-check-label" for="subject">
                                <input type="radio" class="form-check-input" id="virtual" name="virtual" value="yes">Yes
                            </label>
                          </div>
                          <div class="form-check">
                            <label class="form-check-label" for="subject">
                                <input type="radio" class="form-check-input" id="virtual" name="virtual" value="no">No
                            </label>
                          </div>
                        </span>

                      <button type="button" class="btn" id="petsBtn">
                        <h6>Pets <i class="fas fa-filter"></i></h6>
                        </button>
                        <span id="petsPanel" style=display:none>
                          <div class="form-check">
                            <label class="form-check-label" for="subject">
                                <input type="radio" class="form-check-input" id="pets" name="pets" value="none" checked>None
                            </label>
                          </div>
                          <div class="form-check">
                            <label class="form-check-label" for="subject">
                                <input type="radio" class="form-check-input" id="pets" name="pets" value="yes">Yes
                            </label>
                          </div>
                          <div class="form-check">
                            <label class="form-check-label" for="subject">
                                <input type="radio" class="form-check-input" id="pets" name="pets" value="no">No
                            </label>
                          </div>
                        </span>
                      
                </div>

Элементы HTML с использованием блоков:

<div class="col-sm-10 jobList">
                  
                  {% for job in jobs %}
                  <!--<a href="#" class="btn btn-info" data-toggle="modal" data-target="#myModal" id="apply" name="apply">APPLY</a>-->
                  <div class="row table-bordered p-1 text-capitalize" id="myTable" class="jobList">
                    
                    <div class="col-lg-1">
                      <img src="{{ job[1] }}" style=width:50px;height:50px class="rounded-circle"/>
                    </div>

                    <div class="col-lg-9">
                      <tr>
                      <div class="row">
                        <span class="font-weight-bold mr-4">{{ job.title }}</span><span class="font-weight-light mr-1">Subject:</span><span id="subject12">{{ job.subject }}</span><span class="font-weight-light ml-4 mr-1">Pay:</span> ${{ job.payRate }}/hr
                      </div>
                      </tr>
                      <tr>
                      <div class="row">
                        {{ job.location }} <span class="font-weight-light ml-4 mr-1">Grade:</span> {{ job.grade }} <span class="font-weight-light ml-4 mr-1">Virtual Tutoring:</span> {{ job.virtual }} <span class="font-weight-light ml-4 mr-1">Pets:</span> {{ job.pets }}
                      </div>
                      </tr>
                      <tr>
                      <div class="row mt-2">
                        {{ job.description }}
                      </div>
                      </tr>
                    </div>

                    <div class="col-lg-2">
                        
                        <div id="{{job.id}}" class="mb-4"></div>
                        <script>
                          document.getElementById('{{job.id}}').innerHTML = moment('{{ job.datePosted }}').fromNow();
                        </script>
                      
                        <button type="button" class="btn btn-info button-item" data-toggle="modal" data-target="#myModal"  id="apply-{{job.id}}" name="apply">
                          APPLY
                        </button>
                    </div>   

                  </div>
                </br>
                
                  {% endfor %}
                
                </div>

            </div>
      </div>
    </main>

И вот JavaScript, который у меня есть (обратите внимание, что это уже моя 6-я попытка, так что это последний код, который я пробовал, я был разными способами, которые не похожи на этот) застрял на этом около недели; ps это не hw; это для личного проекта, над которым я работаю.

Спасибо!