problem with gallery to open and close elements

Question

I am developing a photo gallery on my website, when you click on the photo appears a box with a text and a side image, explaining about the image follows a print Clicking on x closes normal however if I click on another image opens the box referring to the image I clicked, but the first does not close there is one on top of the other and at closing time it is having to close one by one, that is if the guy clicked on 8 images before closing on x he will have to go closing manually after. I wanted to know if you have any way to fix it so that when the person has already opened a box by clicking on another image the box that was open closes follows my code:

HTML:

<div class="wmg-item work-screenshots">
                                    <div class="wmg-thumbnail">
                                        <div class="wmg-thumbnail-content">
                                            <!-- exemplo de conteudo para thumbnail -->
                                            <img src="http://www.missnikkey.com.br/wp-content/uploads/2015/01/350x350.gif" alt="image">
                                            <!-- fim do exemplo -->
                                        </div>
                                    <div class="wmg-arrow"></div>
                                </div>
                                <div class="wmg-details">
                                    <!-- <span class="wmg-close"></span> -->
                                    <i class="fa fa-times wmg-close" aria-hidden="true"></i>
                                    <div class="wmg-details-content">
                                        <!-- exemplo de coteúdo para detail -->
                                        <div class="container description-work">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <img src="http://www.htreafarms.com/images/new-family-photos/blank.jpg" alt="image">
                                                </div>
                                                <div class="col-md-6 text-left">
                                                    <h2 class="title-work">Decathlon</h2>
                                                    <hr class="bar">
                                                    <h4>Cliente desde - <span>2006</span></h4>
                                                    <p class="text-work">
                                                        Fundada em 1976 é hoje um dos maiores varejistas do mundo no segmento esportivo, a rede francesa Decathlon está presente no Brasil desde 2001, quando abriu sua primeira loja em Campinas, no interior paulista. Hoje conta com 11 lojas no Brasil e 535 no Mundo.
                                                    </p>
                                                    <a href="#" target="_BLANK" class="prt_btn">Visite o site</a>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- fim do exemplo -->
                                    </div>
                                </div>
                                </div><!-- .wmg-item -->

JS

$(".work-screenshots").slice(0, 6).show();
    $("#loadMore-works").on('click', function (e) {
        e.preventDefault();
        $(".work-screenshots:hidden").slice(0, 3).slideDown();
        if ($(".work-screenshots:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
    });