JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="mostrarOpcionesFiltrado" class="btn btn-default btn-xs">Mostrar Opciones de Filtrado</button>

<div id="apellido" class="form-group sr-only">
  <label for="exampleInputName2">Apellido</label>
  <input type="text" class="form-control" name="apellido">
</div>
<div id="email" class="form-group sr-only">
  <label for="exampleInputName2">Email</label>
  <input type="text" class="form-control" name="email">
</div>
<div id="dni" class="form-group sr-only">
  <label for="exampleInputName2">DNI</label>
  <input type="text" class="form-control" name="dni">
</div>
<div id="username" class="form-group sr-only">
  <label for="exampleInputName2">UserName</label>
  <input type="text" class="form-control" name="username">
</div>

CSS

.sr-only {
  display: none;
}

JavaScript

var mostrarFiltros = {

    esconderFiltros: function() {

      $('#apellido').removeClass('sr-only');
      $('#email').removeClass('sr-only');
      $('#dni').removeClass('sr-only');
      $('#username').removeClass('sr-only');
    },

  } //cierre del objeto mostrarFiltros


$(function() {
  $('#mostrarOpcionesFiltrado').click(function() {
     mostrarFiltros.esconderFiltros();
 	});

})