Открыть изображение, на которое нажал пользователь

Question

У меня есть два изображения. Однако, когда я нажимаю, чтобы открыть один, он открывает оба. Кроме того, я сделал код, который берет изображение, которое имеет тот же самый sr c, но при открытии одного оно открывает два идентичных изображения. Я хочу, чтобы вы открывали только одну и только ту, на которую нажал пользователь.

$(document).ready(function() {
  $('.img-min').on("click", function() {
    // $(this).toggleClass('img-max')
    const min = $(this).attr('src');
    const max = $('img').attr('src', min);
    $('div').removeClass('hide');
    $('#close-img').removeClass('hide');
    $("body").addClass("sem-scroll");
  });
})

.img-min {
  height: auto;
  width: 10%;
}

.hide {
  display: none !important;
  transition: all 0.5s;
}

.hide:hover {
  transition: all 0.5s;
}

.overlay {
  background-color: black;
  opacity: 0.8;
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.sem-scroll {
  overflow: hidden;
  user-select: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center hide" id="openImg">
  <div class="overlay">
    <img class="img-max" src="images/jbproducts1.png">
    <img class="img-max" src="images/logo.png">
  </div>
</div>
<h1 class="text-center mb-5">Lorem Ipsum</h1>
<div id="div-icon" class="row">
  <div class="col-lg-6">
    <img class="img-min" src="images/jbproducts1.png" alt="">
    <img class="img-min" src="images/logo.png" alt="">
  </div>
</div>

Answer 1

Строка

const max = $('img').attr('src', min);

Изменяет атрибуты sr c всех тегов img на одно и то же значение (const min). Вот почему у вас есть два одинаковых изображения.

С селектором $('img.img-max[src="'+min+'"]') вы должны получить только элемент img-max с правильным sr c. Тогда покажи только этот элемент и скрой остальных.