How to reset the functions of an onclick event?

Question

I have a modal page with buttons close and minimize.

The minimize button has a function onclick to change your background between maximize and minimize and other tooglefulscreen to exit and enter full screen mode.

The close button has the function exitfullscreen to close the page in full screen.

I believe my problem is that after executing the function the button that was clicked does not return to the original image, it remains the same as the last function executed.

event 1
page modal > minimize.png > click > change to > maximize.png
modal page > close.png> click > close modal window

event 2 ( the event should start equal to event 1 )
modal page > maximize.png > click > changes to > minimize.png
modal > close.png > click > close modal window

event 3 ( the event should start equal to the event 2 )
modal page > minimize.png > click > change to > maximize.png
modal > close.png > click > close modal window

What happens is that after the end of these functions or after closing the modal page through the close button, the bottom of the minimize button remains the same as its last function, for example, if I close the page without clicking the "minimize" button and then open the page, the page opens with the minimize active button to be clicked exit full screen mode and change the image to maximize, but if I press the minimize button and minimize and after that close the page when I open it again the maximize button appears active in full screen and the effect is reversed.

$(document).on('click', '#botao1', function() {
  $("#status").html("mudando o nome do botão para botao2");
  $(this).attr("id", "botao2").html("");
});
$(document).on('click', '#botao2', function() {
  $("#status").html("retornando o nome do botão para botao1");
  $(this).attr("id", "botao1").html("");
});

function toggleFullScreen(id) {
  var div = document.getElementById(id);
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (div.requestFullScreen) {
      div.requestFullScreen();
    } else if (div.mozRequestFullScreen) {
      div.mozRequestFullScreen();
    } else if (div.webkitRequestFullScreen) {
      div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

#botao1 {
  position: fixed;
  z-index: 9999;
  width: 70px;
  height: 70px;
  top: 5px;
  right: 110px;
  background: url(Img/btn-maximizar.png) no-repeat;
}

#botao1:hover {
  background: url(Img/btn-maximizar-2.png) no-repeat;
}

#botao2 {
  position: fixed;
  z-index: 9999;
  width: 70px;
  height: 70px;
  top: 5px;
  right: 110px;
  background: url(Img/btn-minimizar.png) no-repeat;
}

#botao2:hover {
  background: url(img/btn-minimizar-2.png)no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="botao1" onclick="toggleFullScreen('full')"></button>
<button class="fechar" onclick="exitFullscreen();">X</button>