I have a table, there are 20 tr but when i click the button I want the tr to be 4 only.

```
<table class="table">
<tbody>
for (int i = 0; i < 20; i++) {
   <tr class="data">
   <td>ID</td>
   <td>Item</td>
   </tr>
}
</tbody>
</table>

```

My button:

```
<button type="button" id="btnFilter" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Filter</button>

```

My Script:

```
$('#btnFilter').on('click', function() {
        $('.data').empty();
for (int i = 0; i < 4; i++)
        $('.data').append('<td>asd</td>');
    });

```

It is displaying 20 again...