Как сделать чтобы элемент появлялся только в том блоке на котором был клик? Jquery

$(".openspan").on("click", function() {
  $(this).closest(".card").find(".content").show();
});
$(".closediv").on("click", function() {
  $(this).closest(".card").find(".content").hide();
});

<div class="card" style="border: 1px solid red">
  <div class="closediv">Close</div>
  <span class="openspan">Open</span>
  <div hidden class="content">
    <img width="150" src="https://avatars.mds.yandex.net/get-pdb/985790/453d00bf-6999-41ed-b0bf-a8bc310ac9ca/s1200?webp=false">
  </div>
</div>
<div class="card" style="border: 1px solid red">
  <div class="closediv">Close</div>
  <span class="openspan">Open</span>
  <div hidden class="content">
    <img width="150" src="https://avatars.mds.yandex.net/get-pdb/985790/453d00bf-6999-41ed-b0bf-a8bc310ac9ca/s1200?webp=false">
  </div>
</div>
<div class="card" style="border: 1px solid red">
  <div class="closediv">Close</div>
  <span class="openspan">Open</span>
  <div hidden class="content">
    <img width="150" src="https://avatars.mds.yandex.net/get-pdb/985790/453d00bf-6999-41ed-b0bf-a8bc310ac9ca/s1200?webp=false">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>