Попытка скрыть элементы моей игры до тех пор, пока не будет выполнено условие

Я сделал, как отключить вкладки и включить. Но теперь я хочу скрыть элементы, чтобы было полезнее, когда игрок что-то открывает.

Я пробовал это:

<div id = "turtle" style = "visibility: hidden;">
                <label class = "radio">
                    <input type = "radio" name = "turtle">
                </label><img src = "turtle.jpg" alt = "Smiley face" 
height = "42" width = "42"></div>
            <br />

Заставляет питомца исчезнуть:

Затем создайте скрипт на JavaScript для каждого питомца, когда он разблокируется, чтобы он стал видимым, но он работает неправильно.

Я думал, что поскольку перерождение равно 4 (сделал это, чтобы проверить, нормально ли оно работает, начиная с 0), моя черепаха будет единственной раскрытой.

Это мой код JavaScript:

 rebirths = 4

function checkUnlock() {
    if (rebirths >= 4) {
        document.getElementById("turtle").visibility = "visible";
    } else {
        document.getElementById("turtle").visibility = "hidden";
    }

    if (Magiclv >= 10) {
        document.getElementById("lizard").visibility = "visible";
    } else {
        document.getElementById("lizard").visibility = "hidden";
    }

    if (wolf >= 1) {
    document.getElementById("wolf").visibility = "visible";
    } else {
        document.getElementById("wolf").visibility = "hidden";
    }

  function Turtlepassive(){
      if (rebirths >= 3){


      }
  }

Остальная часть моего HTML-кода:

   <div class = "main_container">
        <p>This is the Pets
            <br />
            <br />
            <div id = "turtle" class = "control">
                <label class = "radio">
                    <input type = "radio" name = "turtle">
                </label><img src = "turtle.jpg" alt = "Smiley face" height = "42" 
width = "42"></div>
            <br />
            <br />
            <div id = "lizard" class = "control">
                <label class = "radio">
                    <input type = "radio" name = "lizard">
                </label><img src = "lizard.png" alt = "Smiley face" height = "42" 
width = "42"></div>
            <br />
            <div id = "wolf" class = "control">
                <label class = "radio">
                    <input type = "radio" name = "wolf">
                </label><img src = "wolf.png" alt = "Smiley face" height = "60" 
width = "60"></div>
            <br />

            <script type = "text/javascript" src = "Pets.js"></script>

        </p>
    </div>

Я ожидаю, что питомцы будут спрятаны до тех пор, пока их условие не будет выполнено. Новичок в HTML, поэтому запутался в том, как работает видимость. Но на самом деле они все раскрыты и не привязаны к условиям.