格的高度取决于宽度，但仅适用于出现班级的第一个格

Question

我想让每个具有兴趣爱好的div在点击时扩展到整个部分。 问题在于，只有第一个似乎激活了updateHeight（）函数，该函数将height值更改为与width相同。

我真的不知道出什么问题了，我检查了

    $(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时，除第一个之外，divs高度均无任何反应，我会全部将其复制以从width复制值并设置高度 相同