자바스크립트 바지 셀럭터가 노출되지 않습니다.

  <form class="container my-5 form-group">

    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
    </select>
    <select class="form-select mt-2 form-hide">
      <option>95</option>
      <option>100</option>
    </select>

    <script>

      var pants = [28, 30, 32];

      $('.form-select').eq(0).on('input', function(){
    
        var value = $('.form-select').eq(0).val();
        if (value == '셔츠') {
          $('.form-select').eq(1).removeClass('form-hide');
        }
        else if (value == '바지'){
          $('.form-select').eq(1).removeClass('form-hide');
          $('.form-select').eq(1).html('');
           
          pants.foreach(function(){
            $('.form-select').eq(1).append('<option>28</option>')
          });
        }

      });

    </script>

오타부분 아무리 눈씻고 찾아봐도 없고 선생님 강의하단에 있는 코드 그대로 복붙해도 안됩니다. 왜그럴까요?