Hide table row(s) in twig with symfony

Question

I'm starting coding. I'm using Symfony 3.3 I would like to hide ( and show ) a or some specifics rows on a table with a checkbox. I tried with javascript and jquery. I would like that the hidden rows stay hide. I don't know how to do this. Here is my twig

{% block body %}

    <div class="container">
        <h3>List of products</h3>

        <table class="table table-striped">
    <thead>
    <tr>
        <th>Product</th>
        <th>Description</th>
        <th>Size</th>
        <th>Charges</th>
        <th>Price</th>
        <th>Actions</th>
        <th>Desactivation</th>

    </tr>
    </thead>

    <tbody>
    {% for catalogue in catalogues %}
    <tr class="table">

        <td>{{ catalogue.product}} </td>
        <td>{{ catalogue.description }} </td>
        <td>{{ catalogue.size}} </td>
        <td>{{ catalogue.charge }} </td>
        <td>{{ catalogue.price }}</td>
        <td>
            <a href="{{ path('catalogue_list_edit', { 'id': catalogue.id }) }}"><span class="glyphicon glyphicon-edit"></span></a>
            <a href="{{ path('catalogue_list_delete', { 'id': catalogue.id }) }}"><span class="glyphicon glyphicon-remove"></span></a>
        </td>
            <td><input type="checkbox" name="boutton35"  value="Desactivation"  />
      </td>

    </tr>

    {% else %}
    {% endfor %}

    </tbody>
        </table>

{% endblock %}

Answer 1

 $('.hideshow').on('click',function(){ let cls = $(this).attr("data-id") if ( $('#'+cls).css('display') == 'none' ){ $('.table tbody').find('#'+cls).show(); }else{ $('.table tbody').find('#'+cls).hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <h3>List of products</h3> <div class="buttons"> <button type="button" data-id="tr1" class="hideshow">Hide/Show Row 1</button> <button type="button" data-id="tr2" class="hideshow">Hide/Show Row 2</button> <button type="button" data-id="tr3" class="hideshow">Hide/Show Row 3</button> </div> <table class="table table-striped"> <thead> <tr> <th>Product</th> <th>Description</th> <th>Size</th> <th>Charges</th> <th>Price</th> <th>Actions</th> <th>Desactivation</th> </tr> </thead> <tbody> <tr id="tr1"> <td>Product </td> <td>Description </td> <td>Size </td> <td>Charges </td> <td>Price</td> <td> <a href="#">Edit</a> <a href="#">Remove</a> </td> <td><input type="checkbox" name="boutton35" value="Desactivation" /> </td> </tr> <tr id="tr2"> <td>Product </td> <td>Description </td> <td>Size </td> <td>Charges </td> <td>Price</td> <td> <a href="#">Edit</a> <a href="#">Remove</a> </td> <td><input type="checkbox" name="boutton35" value="Desactivation" /> </td> </tr> <tr id="tr3"> <td>Product </td> <td>Description </td> <td>Size </td> <td>Charges </td> <td>Price</td> <td> <a href="#">Edit</a> <a href="#">Remove</a> </td> <td><input type="checkbox" name="boutton35" value="Desactivation" /> </td> </tr> </tbody> </table>