How to apply an active class to image in a div with more images? Jquery

I have this code for a small gallery. When the mouse is placed over the image, a menu with thumbnails will appear. When the mouse passes over one of the thumbnails the corresponding image will be visible in the main div but once the mouse leaves the thumbnail the image will be hidden.

What I'm looking for is that when clicking on a thumbnail the corresponding image is visible. For that create an active class .images img.active. I would like to know how to add it to my jquery code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Mouse Enter
const cat = $(".thumbnails img")
cat.on('mouseenter', function() {
  const indexcat = cat.index(this)
  $(".images img.show").removeClass("show");
  $(".images img").eq(indexcat).addClass("show");
});

// Mouse Leave
cat.on('mouseleave', function() {
  const indexcat = cat.index(this)
  $(".images img.show").addClass("show");
  $(".images img").eq(indexcat).removeClass("show");
});

<!-- language: lang-css -->

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.display {
  display: flex;
  width: 740px;
  height: 404px;
  background: silver;
  position: relative;
}
.images img {
  position: absolute;
  opacity: 0;
  transition: all 300ms linear;
}
.images img.show,
.images img.active { 
  opacity: 1;
  transition: .5s linear;
}
.thumbnails {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  padding: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.thumbnails img {
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid;
  border-color: transparent;
  transition: opacity .5s ease;
  opacity: .55;
}
.thumbnails img:hover {
  border-color: red;
  opacity: 1;
  cursor: pointer;
}
.display:hover .thumbnails {
  opacity: 1;
}
body {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  background: #000116;
}
img {
  width: 100%;
  height: 100%;
}

<!-- language: lang-html -->

<div class="display">
  <div class="images">
    <img class="active" src="https://i.imgur.com/Gnn5LiQ.jpeg" alt="">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt="">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt="">
  </div>
  <div class="thumbnails">
                  <img src="https://i.imgur.com/Gnn5LiQ.jpegg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="" style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt=""  style="width: 100px; height: auto;">
</div>
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- end snippet -->

Here is the way you can do it:-

• Bind a click event with thumbnails images and in event handler function, remove the active class and then add the active class on the clicked image.
• Give a higher z-index to image that has "show" class. So, it will show above the active image. For example: give z-index: 1.
• Lastly give more higher z-index to div with class "thumbnails" so that it always on the top of both active and show image. For example: give z-index: 2.

Here is the updated code:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Mouse Enter
const cat = $(".thumbnails img")
cat.on('mouseenter', function() {
const indexcat = cat.index(this)
$(".images img.show").removeClass("show");
$(".images img").eq(indexcat).addClass("show");
});
// Mouse Leave
cat.on('mouseleave', function() {
const indexcat = cat.index(this)
$(".images img").eq(indexcat).removeClass("show");
$(".images img.show").addClass("show");
});
// Click
cat.on('click', function() {
const indexcat = cat.index(this);
// Remove the active img
$(".images img.active").removeClass("active");
$(".images img").eq(indexcat).addClass("active");
});

<!-- language: lang-css -->

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.display {
display: flex;
width: 740px;
height: 404px;
background: silver;
position: relative;
}
.images img {
position: absolute;
opacity: 0;
transition: all 300ms linear;
}
.images img.show,
.images img.active { 
opacity: 1;
transition: .5s linear;
}
.images img.show{
z-index: 1;
}
.thumbnails {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
padding: 20px;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .5s ease;
}
.thumbnails img {
margin-left: 5px;
margin-right: 5px;
border: 1px solid;
border-color: transparent;
transition: opacity .5s ease;
opacity: .55;
}
.thumbnails img:hover {
border-color: red;
opacity: 1;
cursor: pointer;
}
.display:hover .thumbnails {
opacity: 1;
z-index: 2;
}
body {
display: flex;
justify-content: center;
margin-top: 20px;
background: #000116;
}
img {
width: 100%;
height: 100%;
}

<!-- language: lang-html -->

<div class="display">
  <div class="images">
    <img class="active" src="https://i.imgur.com/Gnn5LiQ.jpeg" alt="">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt="">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt="">
  </div>
  <div class="thumbnails">
                  <img src="https://i.imgur.com/Gnn5LiQ.jpegg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="" style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt=""  style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt=""  style="width: 100px; height: auto;">
</div>
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- end snippet -->