Error while showing and hiding a div with Jquery

Sirs, good morning! I'm trying to show and hide an image if it satisfies the set conditions, but they appear only after the else, not understanding what I'm missing. That is, the div cancel1, cancel2 and cancel3 are not appearing when if is attended.

<script type="text/javascript">
    $(document).ready(function(){
    var valor_mo_contrato_s = parseFloat($("#valor_mo_contrato").val()).toFixed(2);
    var valor_mobra_s = parseFloat($("#total_mobra_orc_calc").val()).toFixed(2);
    var valor_mat_contrato_s = parseFloat($("#valor_mat_contrato").val()).toFixed(2);
    var total_mat_orc_calc_s = parseFloat($("#total_mat_orc_calc").val()).toFixed(2);
    var valor_unitario_contrato_s = parseFloat($("#valor_unitario_contrato").val()).toFixed(2);
    var total_unitario_orc_calc_s = parseFloat($("#total_unitario_orc_calc").val()).toFixed(2);

    if (parseFloat(valor_mo_contrato_s) < parseFloat(valor_mobra_s)) {
        $("#valor_mo_orc_check").text("O Sistema sugere que o Fiscal verifique o valor de Mao de Obra.");
        $("#valor_mo_orc_check").css({"color": "red"});
        $("#cancel1").css('display','block');
    }else{
        $("#ok1").css('display','block');
    };

    if (parseFloat(valor_mat_contrato_s) < parseFloat(total_mat_orc_calc_s)) {
        $("#valor_mat_orc_check").text("O Sistema sugere que o Fiscal verifique o valor de Material.");
        $("#valor_mat_orc_check").css({"color": "red"});
        $("cancel2").css('display','block');
    }else{
        $("#ok2").css('display','block');
    };

    if (parseFloat(valor_unitario_contrato_s) < parseFloat(total_unitario_orc_calc_s)) {
        $("#valor_unitario_orc_check").text("Orcamento REPROVADO pelo SISTEMA, de acordo com os limites contratuais.");
        $("#valor_unitario_orc_check").css({"color": "red"});
        $("#cancel3").css('display','block');
    }else{
        $("#ok3").css('display','block');
    };
});
</script>