Mostrando y ocultando partes de Form

[ignacio85r]

Buenas muchachos. todo bien????
les consulto ya que no logro hacer que se muestre una parte de la web y no encuentro donde esta mi error.

la cuestion es mostrar el campo Tarjeta, Cbu o Efectivo, segun lo escogido en el select:

Código HTML:

<div class="form-group">
                    <label class="control-label col-xs-3">Medio de pago:</label>
                        <div class="col-xs-7 col-md-9">
                            <select class="form-control col-xs-3" name="medio de pago">
                              <option id="Tarjeta">Tarjeta de credito</option>
                              <option id="Debito">Debito en cuenta</option>
                              <option id="Efectivo">Efectivo</option>
                            </select>
                        </div>
                    </div>
                    <div id="Tc" class="form-group">
                        <label class="control-label col-xs-3">Nº Tarjeta:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="number" name="Nº Tarjeta" class="form-control" placeholder="Tarjeta(16)" title="Faltan los Numeros de tarjeta" required="">
                        </div>
                    </div>
                    <div id="Dc" class="form-group">
                        <label class="control-label col-xs-3">Nº Cbu:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="number" name="Nº Cbu" class="form-control" placeholder="Numero de CBU(22)" title="Faltan los Numeros de Cuenta" required="">
                        </div>
                    </div>
                    <div id="Pe" class="form-group">
                        <label class="control-label col-xs-3">Efectivo:</label>
                        <div class="col-xs-7 col-md-9">
                            <input type="number" name="Nº Cbu" class="form-control" placeholder="Numero de CBU(22)" title="Faltan los Numeros de Cuenta" required="">
                        </div>
                    </div>
 

Código Javascript:

$(document).ready(function(){
$("#form1").css("display","none");
$("#form2").css("display","none");
 
$("#Tc").css("display","none");
$("#Dc").css("display","none");
$("#Pe").css("display","none");
 
$("#emision").on("click", function(){
    $("#form1").css("display","block");
    $("#form2").css("display","none");
    $("#form2").prop('requiered', false);
});
$("#cotizacion").on("click", function(){
    $("#form2").css("display","block");
    $("#form1").css("display","none");
    $("#form1").prop('requiered', false);
});
 
$("#Tarjeta").on("click", function(){
    $("#Tc").css("display", "block");
    $("#Dc").css("display", "none");
    $("#Pe").css("display", "none");
});
 
$("#Debito").on("click", function(){
    $("#Tc").css("display", "none");
    $("#Dc").css("display", "block");
    $("#Pe").css("display", "none");
});
 
$("#Efectivo").on("click", function(){
    $("#Tc").css("display", "none");
    $("#Dc").css("display", "none");
    $("#Pe").css("display", "block");
});
 
});
 

desde ya muchas gracias!! saludos!!