Высота div в зависимости от ширины, но работает только для первого div, где появляется класс

Question

Я хочу, чтобы каждый div с хобби-классом расширялся до целого раздела по клику.Проблема в том, что только первый, кажется, активирует функцию updateHeight (), которая изменяет значение высоты так же, как ширина.

Я буквально не знаю, что не так, я проверил, если

    $(window).ready(updateHeight);
    $(window).resize(updateHeight);

    function updateHeight()
    {
        var div = $('.hobby, .hobbyOnClick');
        var width = div.width();

     div.css('height', width);
    }

    $(document).ready(function(){
        $(".hobby").on('click', function(){
        $(".hobby").css("cursor", "default");
        $(this).removeClass('hobby').addClass("hobbyOnClick");
        $(".hobby, .hobbyImg").css("display", "none");
        $(".firstInLine").css("margin-left", "0");
        updateHeight();
            });
        $(".hobby").css("cursor", "pointer");
    });

.hobby {
      border: 5px solid #FFD700;
      margin: 10% 5% 5% 5%;
      float: left;
      display: inline-block;
      height: 0;
      width: 20%;
      background-color: #FFFFFF;
    }
    .hobbyOnClick {
      margin: 0;
      height: 0;
      width: 100%;
      background-color: #FFFFFF;
    }
    .hobbyImg {
      margin: 20%;
      width: 60%;
      height: 60%;
    }
    .firstInLine {
      margin-left: 8%;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="content" id="page2">
      <div class="hobby firstInLine">
          <img class="hobbyImg" src="img/workout.png" alt="Sport">
      </div>
      <div class="hobby">
          <img class="hobbyImg" src="img/map-of-roads.png" alt="Travel">
      </div>
      <div class="hobby">
          <img class="hobbyImg" src="img/atlas-farnesio.png" alt="Objectivism">                
      </div>
      <div class="hobby firstInLine">
          <img class="hobbyImg" src="img/car-engine.png" alt="Engineering">                  
      </div>
      <div class="hobby">
          <img class="hobbyImg" src="img/programming-code.png" alt="Programming">  
      </div>
      <div class="hobby">
          <img class="hobbyImg" src="img/hand-holding-up-a-sack-of-money.png" alt="Economy">  
      </div>
  </section>

На данный момент, когда я нажимаю любой из div'ов 'hobby', кроме первого, ничего не происходит с высотой divs, и я смотрел все из них, чтобы скопировать значение изширина и высота одинаковы