Javascript variable changes value itself

So, I am writing a code for my webpage that if you have one of two boxes open (registration, login) you can't open another one. I'm stuck with the following problem: once you close the box with pressing the mouse out of the box, value changes to 1 and you should be able to open the box again but all of a sudden it sets itself to 0 and you can't open the box anymore.

IF you close the box with CLOSE button, you CAN open the box again but not with pressing outside the box.

At the start of JS file I declare var openable and set value to 1.

var openable = 1; 

Code for closing with CLOSE button:

$("#closeReg").click(function(){
    openable = 1;
    console.log(openable);
    $('#register').css('display','none');
    $("#register").siblings().css("opacity", "1");
});

Code for pressing out of box:

var subject = $("#register");
if(e.target.id == subject.attr('id')){
    subject.fadeOut();
    subject.siblings().css("opacity", "1");
    openable = 1;
    console.log(openable);  
} 

Code for opening the box:

$("#regButton").click(function(){
    console.log(openable);
    if(openable == 1){
    $("#register").fadeIn();
    $("#register").siblings().css("opacity", "0.5");
    openable = 0;
    console.log(openable);
    }
});