Does not work when pressing certain sequence of buttons, with js and html

Question

Good morning, stack overflow. I’m going through a strange problem, I don’t even know how to describe it.

Basically I have the 2 screens below

I am creating a form, where it will be necessary to register and edit in it. So my idea was to create 3 buttons, one to edit, or to register and another to cancel.

<div class="col-md-12">
        <a href="javascript:;" id="EdicaoLocalidade" class="btn green EditarLocalidade">Editar Localidade</a>
        <a href="javascript:;" id="CadastrarLocalidade" class="btn green CadastrarLocalidade">Cadastrar Localidade</a>
        <a href="javascript:;" class="btn default Cancelar">Cancelar</a>                            </div>

The idea is, when you press the New Locale button, you can make the Edit button disappear, leaving only the Sign Up and Cancel button.

$('.page-toolbar a').click(function() {
            inicNovaLocalidade();
            $('.portlet.NovaLocalidade').slideDown();
            $(this).addClass('disabled');
            $(".EditarLocalidade").css("display","none");

        });

The same idea would be to edit it, when you click on the pen, next to the data, ie to edit.

$(".Editar").on('click', function () {
            $('.portlet.NovaLocalidade').slideDown();
            $(".CadastrarLocalidade").css("display","none");

        })

The bizarre problem, is when I press Edit first, the cancel button does not work at all, but if I press the New Locale, cancel it, works right, for both cases.

My idea is that when I hit the cancel, besides giving the slide down, I would undo the hidden effect of the button.

//evento click do cancelar
$('#CadastroLocalidade a.Cancelar').click(function() {
    //teste para o botão cadastrar localidade
    var editLocalidade = document.getElementById("EdicaoLocalidade");
    var cadLocalidade = document.getElementById("CadastrarLocalidade");

    if(editLocalidade.style.display != 'none'){
        $('.portlet.NovaLocalidade').slideUp();
        $('.page-toolbar a').removeClass('disabled');
        $(".EditarLocalidade").css("display","inline-block");
    }


});

UPDATING

When I click on this button here, that the cancel does not work... in any way, this error

Answer 1

In this Function, when clicking on register a hide on the edit button and vice versa. Clicking cancel again displays all buttons.

$("#operacao").on('click','a', function () {
    if($(this).attr("id") == "editar"){
        $("#cadastrar").hide();
        $("#editar").show();
    }else if($(this).attr("id") == "cadastrar"){
    	$("#cadastrar").show();
        $("#editar").hide();
    }else{
    	$("#cadastrar").show();
        $("#editar").show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="operacao">
    <a href="#?" id="editar">Editar</a>
    </br>
    <a href="#?" id="cadastrar">Cadastrar</a>
    </br>
    <a href="#?" id="cancelar">Cancelar</a> 
</div>

Answer 2

$('#CadastroLocalidade a.Cancelar').click(function() {

Element ID is wrong #Registration should be #CadastrarLocality