자바스크립트로 html 생성부분

<form class="container my-5 form-group">
        <p>상품선택</p>
        <select class="form-select mt-2">
          <option>모자</option>
          <option>셔츠</option>
          <option>바지</option>
        </select>
        <select class="form-select mt-2 show-shirts">
          <option>95</option>
          <option>100</option>
          <option>105</option>
        </select>
    </form>

    <script>

      document.getElementsByClassName('form-select')[0].addEventListener('input', function(){
      var 유저선택 = document.getElementsByClassName('form-select')[0].value;
        if(유저선택 == '셔츠'){
          document.getElementsByClassName('form-select')[1].classList.remove('show-shirts');
        }
        else
          document.getElementsByClassName('form-select')[1].classList.add('show-shirts');
      })

      document.getElementsByClassName('form-select')[0].addEventListener('input', function(){
        var 바지선택 = document.getElementsByClassName('form-select')[0].value;
        var 바지사이즈 = '<option>28</option><option>30</option>';
          if( 바지선택 = '바지'){
            document.getElementsByClassName('form-select')[1].innerHTML = 바지사이즈;
            document.getElementsByClassName('form-select')[1].classList.remove('show-shirts');
          }
          else
            document.getElementsByClassName('form-select')[1].classList.add('show-shirts');
      })

    </script>

생자바스크립트에 먼저 익숙해지기 위해 jquery도 있지만 일부러 이렇게 작성하고 있습니다.

위에 처럼 코드를 작성하였는데, 

바지 옵션을 추가하고 거기에 따라 사이즈를 바꾸는 기능을 만들기전,  모자와 셔츠중 셔츠를 골랐을때, 사이즈 인풋이 출현하고, 다시 모자를 고르면 사라지는것 까지는 잘 출력이 됐습니다.

바지 옵션 추가하는부분을 작성한 뒤로 문제가 생겼는데,

1.페이지 로드하자마자 셔츠를 눌러도 안의 내용이 바지사이즈로 바뀌어 출현하고, 그 상태로 다시 모자로 돌아가도 인풋이 사라지지 않음.

2.바지를 고르면 사이즈가 바뀌어 출현하긴 하지만, 그 상태에서 모자나 셔츠를 고르면 인풋이 사라지지 않음.

이런 문제가 생겼는데,

전체적으로 잘못짠걸까요.. ㅜㅜ