Image viewer with thumbnail Arrow Keys and Click - not able to focus again on click

I have a fairly simple image viewer that puts small images (thumbnails) into a div and allows the user to left and right arrow through the thumbnails and see the larger image below. It also focuses the first image's tag when the page loads and continues to move the focus along when the arrow keys are pressed. This all works great.

But I wanted to add functionality to this where the user could also click a thumbnail (small) image vs necessarily arrowing across to it. So, I added the code under the comment "Clickable Code". It works fine in terms of rendering the image in the class="figure" div, and I'm adding the focused class (and removing it from the existing) like the arrow functionality does, but I just can't seem to get the new clicked tag to show the focus. I've read dozens of posts and tried many different things and think I must just be not understanding something. The code below shows the last attempt I made on the line that reads "$('.focused').focus()".

Thanks so much for any help getting the focus to render!

Here is the markup section:

<div class="DocumentList col-xs-12 d-inline-block">
    @{
        bool first = true;
        @foreach (ImageModel image in Model.images)
        {
            string base64String = "";
            image.IsSelected = true;
            base64String = "data:image/png;base64," + Convert.ToBase64String(image.Data, 0, image.Data.Length);
            
            if (first)
            {
                <a href='#' class="focusable focused clickable d-inline-block"><img class="imageSelect" src="@base64String" /></a>
                first = false;
            }
            <a href='#' class="focusable clickable d-inline-block"><img src="@base64String" /></a>
        }
    }
</div>
<br />

<div class="figure">
    <img type="password" src="https://imgTest.jpeg">
</div>

Here is the original JQuery which works for the Arrow selections:

    $('.focused').first().focus();
    var firsturl = $('.focused').first().find('img').attr('src');
    $('.figure img').attr('src', firsturl);

    // actual code
    $(document).keydown(function (e) {
        if (e.keyCode == 37) { // left
            if ($('.focused').prev('.focusable').length){
                $('.focused').removeClass('focused').prev('.focusable').focus().addClass('focused');
                var thissource = $('.focused').find('img').attr('src');
                //alert($('.focused').prev('.focusable').length);
                $('.figure img').attr('src', thissource);
            }
        }
        if (e.keyCode == 39) { // right
            if ($('.focused').next('.focusable').length) {
                $('.focused').removeClass('focused').next('.focusable').focus().addClass('focused');

                var thissource = $('.focused').find('img').attr('src');
                //alert($('.focused').next('.focusable').length);
                $('.figure img').attr('src', thissource);
            }
        }
    });

And here is the code to be able to click the small (thumbnail) images as well. It works in terms of showing the image in the 'figure' class, but no matter what I try, I can't get the focus to come back.

    //Clickable Code
    $('.clickable img').click(function () {
        $('.focused').removeClass('focused').addClass('focusable')
        jQuery(this).parents('a').addClass('focused').focus()
        $('.focused').focus()
        let clickSrc = $(this).attr('src')
        $('.figure img').removeAttr('src')
        $('.figure img').attr('src', clickSrc)
    })

Solution

While clicking on the thumb image first you have to remove the focused class from all the links.

Then To focus on the current clicked thumb image you need to find its .closest() link <a> and add a focused class to it.

Also, you can reduce your code significantly as well

Working snippet:

$('.clickable img').click(function() {
  $('.clickable').removeClass('focused');
  $(this).closest('a').addClass('focused');
  $('.figure img').attr('src', $(this).attr('src'));
})

.focused img {
  border: 3px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="DocumentList col-xs-12 d-inline-block">
  <a href='javascript::void(0);' class="focusable focused clickable d-inline-block">
    <img class="imageSelect" src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" height="60" width="60" />
  </a>
  <a href='javascript::void(0);' class="focusable clickable d-inline-block">
    <img src="https://previews.123rf.com/images/kamchatka/kamchatka1005/kamchatka100500301/6937927-zebras-on-lake.jpg" height="60" width="60" />
  </a>
  <a href='javascript::void(0);' class="focusable clickable d-inline-block">
    <img src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" height="60" width="60" />
  </a>
  <a href='javascript::void(0);' class="focusable clickable d-inline-block">
    <img src=" https://media.istockphoto.com/id/1146517111/photo/taj-mahal-mausoleum-in-agra.jpg?s=612x612&w=0&k=20&c=vcIjhwUrNyjoKbGbAQ5sOcEzDUgOfCsm9ySmJ8gNeRk=" height="60" width="60" />
  </a>

</div>
<br />

<div class="figure">
  <img type="password" src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" height="300" width="300">
</div>

Note: I have added additional height, width, and some CSS around the image with class focused to just make things clear to you.