Generate table content through click action

Question

I am with a web project that needs to implement functions to generate the content of a table according to the chosen item. For example on my Dashboard I have a tower icon, and below I have a table with all the equipment listed. The question, I have several tower icons on Dashboard and the table are all registered equipment. As you can see below:

Where the patchpanel 100 is linked to tower princess and the other two to tower paradise. Instead, I would like to click on a certain tower to list only the equipment of that tower.

My html Dashboard:

<div class="row">
<input type="hidden" name="torre.id" value="${t?.id}" /> #{list
items:torres, as:'t'}
<div class="col-lg-1 col-sm-1">
    <img class="img-circle img-responsive"
        src="/public/images/torre-green.svg">
    <h5><center>${t.nome}</center></h5>
</div>
#{/list}

<div class="col-lg-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <i class="fa fa-cubes"></i> Detalhes Patch panels
            </h3>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Patch panel</th>
                            <th>MAC</th>
                            <th>IP</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        #{list items:patch, as:'p'}
                        <tr>
                            <td>${p.nome}</td>
                            <td>${p.mac}</td>
                            <td>${p.ip}</td>
                            <td>${p.status}</td>
                        </tr>
                        #{/list}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

When registering a new patchpanel I tell which tower it is linked to, so my tower model has a patchpanel list:

 @Entity
 public class Torre extends Model {

@Required
public String nome;
@Required
public String endereco;
@Required
public String bairro;
@Required
public String cidade;
public String pontoRef;

public String latitude;

public String longitude;

public String altura;
@Required
public String sustentavel;

@OneToMany(mappedBy="torre")
public List<Patchpanel> patchpanels;

@Enumerated(EnumType.STRING)
public Status status;

public Torre() {
    status = Status.ATIVO;
}

Answer 1

Set an id for each tower in <tr> and then print them for the value of input.

$(".torre").on('click', function(event){

    var torre = $(this).find('input').val();
  
    $('#tabela-patch tbody tr').filter(function() {
        if($(this).attr('data-id') != torre.toLowerCase()){
          $(this).css('display', 'none');
        }else{
           $(this).css('display', '');
        }
    });
});

$("#btn-exibirTodas").click(function(event){
  $('#tabela-patch tbody tr').filter(function() {
    $(this).css('display', '');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  
  <div class="col-sm-1 col-xs-2">
    <a href="javascript:void(0)" class="torre">
      <input type="hidden" name="torre.id" value="paraiso" />
      <img class="img-circle img-responsive" width="100px" src="http://images.gofreedownload.net/radio-wireless-tower-cor-11607.jpg">
      <h5><center>PARAISO</center></h5>
    </a>
  </div>

  <div class="col-sm-1 col-xs-2">
    <a href="javascript:void(0)" class="torre">
      <input type="hidden" name="torre.id" value="princesinha" />
      <img class="img-circle img-responsive" width="100px" src="http://images.gofreedownload.net/radio-wireless-tower-cor-11607.jpg">
      <h5><center>PRINCESINHA</center></h5>
    </a>
  </div>

</div>



<div class="col-lg-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <i class="fa fa-cubes"></i> Detalhes Patch panels
            </h3>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped" id="tabela-patch">
                    <thead>
                        <tr>
                            <th>Patch panel</th>
                            <th>MAC</th>
                            <th>IP</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-id="paraiso">
                            <td>Patch Panel 1</td>
                            <td>94:19:54:::</td>
                            <td>192.168.0.1</td>
                            <td>ATIVO</td>
                        </tr>
                        <tr data-id="paraiso">
                            <td>Patch Panel 12</td>
                            <td>94:22:22:22:22:22</td>
                            <td>192.168.0.2</td>
                            <td>ATIVO</td>
                        </tr>
                        <tr data-id="princesinha">
                            <td>Patch Panel 100</td>
                            <td>44:44:44:44:44:44</td>
                            <td>192.168.0.10</td>
                            <td>ATIVO</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<a href="#" id="btn-exibirTodas">Exibir todas</a>

NOTE: Put on Whole Page to view better