Why does this function not work with a boolean variable?

Question

I wrote a simple code to show / hide some layers after pressing buttons (5 in total) and change the color of the pressed buttons. It works great. But then I wanted to show a certain element - an arrow - only after pressing the first button using a logical variable, and it does not work, the if statement never returns the first part (hooray). What am I missing?

var click01 = false;

function allowright1() {
  if (click01 == true) {
    console.log('hoooray');
    $('#right_arrow').removeClass('hidden').addClass('visible');
  } else {
    console.log('not working');
  }
};

$('#tile1_p1').click(function() {
  if ($('#1layers1').css('display') == 'none') {
    $('#1layers2, #1layers3, #1layers4, #1layers5').removeClass('block').addClass('none');
      $('#tile2_p1, #tile3_p1, #tile4_p1, #tile5_p1').removeClass('orange');
      $('#1layers1').removeClass('none').addClass('block'); $('#tile1_p1').removeClass('white').addClass('orange');
      var click01 = true; 
      console.log('click01 ' + click01); 
      allowright1();
    }
    else if ($('#1layers1').css('display') == 'block') {
      $('#1layers1').removeClass('block').addClass('none');
      $('#tile1_p1').removeClass('orange').addClass('white');
    }
  });

Answer 1

You are not redirecting a top-level variable click01.

var click01 = true;, , . var, , .

$(...).click(function() {
  ...
  click01 = true; // by removing var we reassign the top level variable
  ...
});