重叠面板

我有两个班级相同但内容不同的面板。每当我单击第一个面板的第一个链接或第二个面板的第二个链接时，它们都同时显示，从而产生重叠。我尝试为其中每个添加两个ID，但似乎无法正常工作。

https://codepen.io/jinzagon/pen/VwammbJ

的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" style="color:white;z-index:99999999;position:absolute;">

    <a style="color:white;" href="#1" class="reveal-up">First Panel</a>
<br>
<a style="color:white;" href="#2" class="reveal-up">Second panel</a>
</div>

<div class="panel-up" id="1">
  <div class="panel-content">
    <div class="close"></div>
    <p style="margin-bottom: 30px; color:white;">FIRST PANEL</p> 
  </div>
</div>

<div class="panel-up" id="2">
  <div class="panel-content">
    <div class="close"></div>
    <p style="margin-bottom: 30px; color:white;">SECOND PANEL</p> 
  </div>
</div>


<img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80">
<div class="content" style="color:white">

  <h2 style="margin-top:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies aliquet quam quis faucibus. Maecenas at nibh hendrerit ex lobortis tristique. Ut hendrerit aliquet lacus, sed bibendum nisl dapibus non. Etiam eleifend eu ipsum at varius. Nam metus odio, placerat eu lacus quis, euismod finibus magna.</p>
    <ul>
      <li><code>ESC</code> - Close all windows</li>
      <li><code>R></code> - Open panel with pressing "R" </li>
    </ul>      
</div>

的CSS

    .content {
      padding: 50px;
      position: absolute;
      width: 90%;
      -webkit-transition: all .7s ease;
      transition: all .7s ease;  
    
      transform: scale(1);
      opacity:1;
      bottom:10%;
    }
    .content.hidefor-panel-up { 
        bottom: 20%;
        transform: scale(0.95);
        opacity:0;
    }
    
    .ip {
      display:block;
      width:100%; height:100%;
      object-fit: cover;
      position: absolute;
      -webkit-transition: all 1s ease;
      transition: all 1s ease;  
      opacity:1;
      top:0;
      opacity:1; z-index:-5; position:absolute;
    }
    .ip.hidefor-panel-up { 
        opacity:1;
        top: 10%;
    }
    
    
    
    *,
    *:before,
    *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    body {
      font-family: "Lucida Console", Monaco, monospace;
      background: #06113E;
      line-height: 1.5em;
      font-size: 15px;
      overflow: hidden;
    }
    code {
      border: 1px solid #dddddd;
      background: #efefef;
      border-radius: 3px;
      padding: 3px 5px;
    }
    h1,
    h2,
    h3 {
      margin-bottom: 0.5em;
    }
    ul {
      margin: 30px 40px;
    }
    li {
      margin: 5px 0;
    }
    .panel {
      padding: 20px;
    }
    .panel-content {
      position: relative;
      /*background: #efefef;*/
      padding: 30px 50px;
      overflow-y: auto;
      height: 100%;
    }
    .panel-content .close {
      line-height: 15px;
      position: absolute;
      text-align: center;
      cursor: pointer;
      display: block;
      color: #ffffff;
      right: 5px;
      top: 5px;
      height: 15px;
      width: 15px;
      content: "✖";
    }
    .panel-content .close:before {
      line-height: 15px;
      position: absolute;
      text-align: center;
      cursor: pointer;
      display: block;
      color: #ffffff;
      right: 5px;
      top: 5px;
      height: 15px;
      width: 15px;
      content: "✖";
    }
    .panel-left {
      z-index: 10;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      background: #eeeeee;
      position: fixed;
      display: block;
      bottom: 0;
      top: 0;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      left: -100%;
      width: 45%;
    }

.panel-left.expanded {
  left: 0;
}
.panel-up {
  z-index: 10;
  position: fixed;
  display: block;
  bottom: 0;
  -webkit-transition: all .7s ease;
  transition: all 0.7s ease-out;
  bottom: -20%;
  width: 100%;
}
.panel-up.expanded {
  bottom: 0;
}
.reveal-left {
  float: left;
}
.reveal-up {
  float: right;
}
.nav {
  padding: 10px;
  margin: 0 auto;
  height: 10px;
  width: 90%;
}
.nav button {
  padding: 4px 6px;
}
.nav a {
  font-weight: bold;
  color: #222;
}

.bottom {
  background: yellow;
  display: block;
  position: fixed;
  width: 100%;
  bottom: 0;
}

JS

// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
  $(document).ready(function() {
    // Reveal panel 
    $(buttonReveal).on('click', function() {
      $(panel).addClass('expanded');
      console.log('hidefor-'+panel);
      $(".content").addClass('hidefor-'+panel.substr(1));
      $(".ip").addClass('hidefor-'+panel.substr(1));
    });
    
    // Close panel
    $(buttonClose).on('click', function() {
      $(panel).removeClass('expanded');
      $(".content").removeClass('hidefor-panel-up');
            $(".ip").removeClass('hidefor-panel-up');
    });   
    
    // ESC to close Panel
    $(document).bind("keydown", function(e) {
      if (e.keyCode == 27) { 
          $(panel).removeClass('expanded'); 
          $(".content").removeClass('hidefor-panel-up');
         $(".ip").removeClass('hidefor-panel-up');
      }    
    });
  }); 
}

revealPanel('.reveal-up','.panel-up', '.close');
revealPanel('.reveal-left','.panel-left', '.close');


// Reveal Panel with Shortcuts
$(document).ready(function() {
  $(document).bind("keydown", function(e) {
    if (e.keyCode == 76) { 
    console.log(e.keyCode);
        $('.panel-left').addClass('expanded'); 
    }
    if (e.keyCode == 82) { 
        $('.panel-up').addClass('expanded'); 
        $(".content").addClass('hidefor-panel-up');
        $(".ip").addClass('hidefor-panel-up');
    }
  });
});