I want to solve the problem that the close button (X) does not return to the original hamburger button (three lines).

//◆Hamburger menu◆
      $('.js-hamburger').on('click', function(){
        if($('.js-hamburger') .hasClass('is-open'))){
          $('.js-drawer-menu').fadeOut();
          $(this).removeClass('is-open');
        } else{
          $('.js-drawer-menu').fadeIn();
          $(this).addClass('is-open');
        }
      });
    
      If you click the //sp navigation link,
      $('.sp-nav__item').on('click', function(){
        $('.js-drawer-menu').fadeOut();
        $('js-hamburger').removeClass('is-open');
      });

<header class="header">
        <div class="header__inner">
          <h1class="header__logo">
            <a href="index.html" class="logo">
              <img src="images/CodeUps.png" alt="Logo Image">
            </a>
          </h1>
    
          <!--Hamburger button-->
          <button class="header__hamburger js-hamburger">
            <span>/span>
            <span>/span>
            <span>/span>
          </button>
    
          <!--SP Navigation-->
          <div class="header__sp-navjs-drawer-menu">
            <ul class="sp-nav__items">
              <lic class="sp-nav__item"><a href="index.html">top</a><li>
              <lic class="sp-nav__item"><a href="#news">Notice</a><li>
              <lic class="sp-nav__item"><a href="#content">Business description</a><li>
              <lic class="sp-nav__item"><a href="#works">Quality</a><li>
              <lic class="sp-nav__item"><a href="#overview">Producer's thoughts</a><li>
              <lic class="sp-nav__item"><a href="#blog">blog;/a><li>
              <lic class="sp-nav__item"><a href="#contact">Contact Us</a></li>
            </ul>
          </div>
    
          <!--PC Navigation-->
          <div class="header__pc-nav">
            <ul class="pc-nav__items">
              <lic class="pc-nav__item"><a href="#news">Notice</a><li>
              <lic class="pc-nav__item"><a href="#content">Business Description</a><li>
              <lic class="pc-nav__item"><a href="#works">Quality</a><li>
              <lic class="pc-nav__item"><a href="#overview">Producer's thoughts</a><li>
              <lic class="pc-nav__item"><a href="#blog">blog;/a><li>
              <lic class="pc-nav__item pc-nav__item --white"><a href="#contact">Contact Us</a></li>
            </ul>
          </div>
    
        </div><!--/.header__inner-->
      </header>

.hamburger{
  z-index:9999;
  @include mq(md){
    display: none;
  }
}
US>.hamburger span{
  position:relative;
  display:block;
  height:rem(2);
  width —rem(22);
  background: #ffff;
  transition —ease.3s;
}
.hamburger span:nth-child(1){
  top:0;
}
.hamburger span:nth-child(2){
  margin —4px0;
}
.hamburger span:nth-child(3){
  top:0;
}
// Display X button when opening hamburger menu
.hamburger.is-open span:nth-child(1){
  top —5px;
  transform —rotate (45 deg);
}
.hamburger.is-open span:nth-child(2){
  transform —translateY (-50%);
  opacity: 0;
}
.hamburger.is-open span:nth-child(3){
  top : -7px;
  transform —rotate (-45 deg);
}