Фильтр таблицы django formset в jQuery на основе выбранной опции асинхронно

Я пытаюсь реализовать кнопки фильтрации в моем django formset и нашел решение, которое позволит пользователю делать это асинхронно.

Я пытался использовать код из здесь, но мой html сложнее, и я не знаю, как фильтровать каждую строку на основе текста в колонке Product. Сгенерированный html выглядит следующим образом:

Моя проблема в том, что я не уверен, как передать название related_product как значение или как текст в функции jQuery, так что когда я выбираю тестовый продукт, он покажет мне только строки, которые содержат "test product" текст:

Итак, что я должен указать в качестве имени класса в $('tbody tr').show();, чтобы получить название related_product и показать все строки, которые содержат это название related_product?

views.py

class ProductComponentView(TemplateView):
    template_name = "formset.html"
    
    def get(self, *args, **kwargs):
        get_components = CostCalculator.objects.all()
        get_datetime = timezone.now().strftime('%Y-%m-%dT%H:%M:%S')
        product_list = Product.objects.filter(status=1)
        
        formset = RequestFormset(initial=[{
            'author': self.request.user.email,
            'related_product': component.related_product,
            'related_component': component.id,
            'created': get_datetime,
            'number_of_units': 0
            } for component in get_components])

        return self.render_to_response(
            {'product_component_formset': formset, 
            'product_list': product_list,
            })

    def post(self, *args, **kwargs):

        formset = RequestFormset(data=self.request.POST)

        if formset.is_valid():
            for form in formset:
                form.save()
            return super().form_valid(form)

formset.html

{% for product in product_list %}
  <input class="filterbox" type="checkbox" name="interest" value="{{product.title}}" />{{product.title}}<br />
{% endfor %}

<form method="post">
  {% csrf_token %}

  <table class="table table-hover" style="border-color: 1px solid black !important;">
      {{ product_component_formset.management_form }}
      <thead>
          <th>Product</th>
          <th>Component</th>
          <th>Number of units</th>
      </thead>
      <tbody>
          {% for form in product_component_formset.forms %}
          <tr class="{% cycle 'row1' 'row2' %} formset_row hidden tags test-" style="border-color: black">
              {% for field in form.visible_fields %}
              <td>
                  {% if forloop.first %}
                      {% for hidden in form.hidden_fields %}
                          {{ hidden }}
                      {% endfor %}
                  {% endif %}
                  {{ field.errors.as_ul }}
                  {{ field }}
              </td>
              {% endfor %}
          </tr>
          {% endfor %}
      </tbody>
  </table>
      <button class="cost-calculator" type="submit">Submit</button>
</form>
    
{% block javascript_files %}

<script>
  $('input').click( function() {
    $('.tags').hide();
    $('input:checked').each( function(i) {
        $('tbody tr').show();
    });
});
</script>

{% endblock javascript_files %}

$('.tags').hide();
$('.control').find('input:checkbox').each(function() {
        $(this).click(function(){        
          $('input:checkbox').each( function() {
              checked = $(this).prop('checked');
              if(checked) $('div#' + $(this).val()).show();
              else $('div#' + $(this).val()).hide();
          });
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control">
<input type="checkbox" value="generated_1"> <label>show/hide generated_1 </label>
<input type="checkbox" value="generated_2"> <label>show/hide generated_2 </label>
<input type="checkbox" value="generated_3"> <label>show/hide generated_3 </label>
</div>
<ul>
  <li>
    <div class="tags" id="generated_1">Generated row 1</div>
  </li>
  <li>
  <div class="tags" id="generated_2">Generated row 2</div>
  </li>
  <li>
  <div class="tags" id="generated_3">Generated row 3</div>
  </li>
</ul>

{% for item in list %}
//if statement to prevent not desired filter checkboxes being generated

<input type="checkbox" value="{{item.field_name_for_example}}"> <label>show/hide {{item.field_name_for_example}}</label>
{% endfor %}

<ul>
{% for item in list %}
  <li>
    <div class="tags" id="{{item.field_name_for_example}}">Generated row 1</div>
  </li>
{% endfor %}
</ul>