How to Effect the Selected Card's Part

Question

I have lots of cards and I want to show some part of the card when value of input is chanced. It's works but the problem is when value of input change then part of all cards are showing. I want to show only the selected card's part.

$(".card input").focus(function() {
  $(".save-or-esc").css("display", "flex")
})

.content-body.row {
  justify-content: center;
}

.content-body .card input,
.content-body .card textarea {
  text-align: center;
  border: 1px solid white;
  border-radius: 5px;
  transition: all 0.15s;
  width: 100%;
}

.content-body .card input:hover,
.content-body .card textarea:hover {
  border: 1px solid #e9e8ff;
}

.content-body .card input:focus,
.content-body .card textarea:focus {
  outline: none;
  border: 1px solid #746AFB;
}

.content-body .card-cover {
  width: 25%;
  padding: 0px 14px;
  margin-bottom: 50px;
}

@media (max-width: 1920px) {
  .content-body .card-cover {
    width: 33%;
  }
}

@media (max-width: 768px) {
  .content-body .card-cover {
    width: 50%;
  }
}

@media (max-width: 500px) {
  .content-body .card-cover {
    width: 100%;
  }
}

.card {
  margin-bottom: 0px;
  text-align: center;
}

.card .card-text {
  width: 100%;
  height: 145px;
  overflow: hidden;
}

.card .save-or-esc {
  width: 100%;
  justify-content: space-between;
  display: none;
}

.card .save-or-esc .btn {
  display: inline-block;
}

.card .save-or-esc .btn .feather {
  font-size: 20px;
}

.esc-button:hover {
  color: #f20000;
}

.save-button:hover {
  color: #005CC8;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-body row">

  <div class="card-cover">
    <div class="card">
      <div class="card-body">
        <input class="card-title" type="text" name="content-title" value="About">
        <div class="save-or-esc">
          <button class="esc-button btn" type="button">esc</button>
          <button class="save-button btn" type="button">save</button>
        </div>
      </div>
    </div>
  </div>

  <div class="card-cover">
    <div class="card">
      <div class="card-body">
        <input class="card-title" type="text" name="content-title" value="About">
        <div class="save-or-esc">
          <button class="esc-button btn" type="button">esc</button>
          <button class="save-button btn" type="button">save</button>
        </div>
      </div>
    </div>
  </div>

</div>

Hey guys I added my project to snippet. I hope you can help me. The problem is all ".save-or-esc" parts shows when i click the input. But i want only show the part of clicked card. Thanks.

Answer 1

I did it. Thanks to this content

My jQuery Codes:

$(".card input").on("input", function() {   
  $(this).closest(".card").find(".save-or-esc").slideDown(500)
});