Show hidden items in HTML With js

Cordial Greeting.

What I want to do is the following:

I have the following form:

 <div  class="field">

  <label for="name">Codigo Coordinador<span class="required">*</span></label>
  <div class="inputs">
   <select class="aweform" id="CodigoCordinador" name="CodigoCordinador" required type="text">
    <option>Andres12</option>
    <option>Jose22</option>
    <option>Hola22</option>
    <option>Prueba22</option>
      </select>
  </div>  
 </div>

 <div class="field">
  <label for="email">Cedula<span class="required" onkeypress="return valida(event)">*</span></label>
  <div class="inputs" onkeypress="return valida(event)">
   <input class="aweform" id="Cedula" name="Cedula" required onkeypress="return valida(event)" type="text" autocomplete="off" />
  </div>  
 </div>

 <div class="field">
  <label for="phone">Telefono<span class="required" onkeypress="return valida(event)">*</span></label>
  <div class="inputs" onkeypress="return valida(event)">
   <input class="aweform" id="Telefono" name="Telefono" required onkeypress="return valida(event)" type="text" autocomplete="off" />
  </div>  
 </div>

 <div class="field">
  <label for="subject">Total Devengado<span class="required" onkeypress="return valida(event)">*</span></label>
  <div class="inputs" onkeypress="return valida(event)">
   <input class="aweform" id="TotalDevengado" name="TotalDevengado" required  onkeypress="return valida(event)" type="text"/>
  </div>  
 </div>
 <div class="field">
  <label for="phone">Tiene Pago Vacaciones</label>
  <div class="inputs">
   <select class="aweform" id="PagosVa" name="PagosVa">
    <option></option>
    <option>SI</option>
    <option>NO</option>
   </select>
   <input class="aweform" id="PagosVacacionales" name="PagosVacacionales" type="text"/>
  </div>  
 </div>

  <div class="field">
  <label for="phone">Tiene Pagos Adicionales</label>
  <div class="inputs">
   <select class="aweform" id="PagosAdi" name="PagosAdi">
    <option></option>
    <option>SI</option>
    <option>NO</option>
   </select>
   <input class="aweform" id="PagosAdicionales" name="PagosAdicionales" type="text">
  </div>  
 </div>

 <div class="field">
  <label for="subject">Total Descontado<span class="required" onkeypress="return valida(event)">*</span></label>
  <div class="inputs" onkeypress="return valida(event)">
   <input class="aweform" id="TotalDescontado" name="TotalDescontado" required onkeypress="return valida(event)" type="text"/>
   <br>
  </div> 

  <input type="button" id="limpiar" onclick="limpiarFormulario();" class="myButton" value="Limpiar">


  <input type="submit" name="Validar" id="validar" class="myButton2" value="Validar">

What I want to do is that when I click on validate: it shows the following that is hidden:

  <script type="text/javascript">

      $(document).ready(function(){
          $('#limpiar').click(function(){

              $('#desprendible').show();

          });
      });  


  </script>
   <div class="desprendible" id="desprendible" style="display: none">

              <input type="text" id="user" placeholder="Usuario">
              <input type="text" id="pass" placeholder="Contraseña">
              <input type="button" id="btn-cancelar" Value="Cancelar">
              <input type="button" id="btn-enviar" Value="Enviar">

          </div>


</form>

I do not know how to make it work.

I hope you can help me please.