How to make my button only show the div on its group when I click it

Question

Currently when I click the 1st button both hidden divs are showing. My goal is when I click the 1st button it only shows the hidden div on its group. And if I click the 2nd button it only shows the hidden div on its group.

Can anyone help me with how to achieve it?

$(document).ready(function () {
    $(".btn").on("click", function () {
        $(".hidden").addClass("active");
    });
    
    $(".closed").on("click", function (){
        $(".hidden").removeClass("active")
    })
})

.btn {
  background: blue;
  color: #ffffff;
  font-weight: 600;
  padding: 20px;
}


.hidden {
  width: 100px;
  height: 100px;
  background: yellow;
  display: none;
}


.hidden.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="con">
      <div class="btn">Show</div>
      <div class="hidden">
        <div class="closed">Click to hide</div>
      </div>
  </div>
</div>

<br>

<div class="container">
  <div class="con">
      <div class="btn">Show</div>
      <div class="hidden">
        <div class="closed">Click to hide</div>
      </div>
  </div>
</div>