Пытаясь построить галерею, как исчезнуть отображаемый в данный момент div и исчезнуть в следующем?

В настоящее время я работаю над новым личным портфолио, используя очень простой код html/css/jquery. Я пытаюсь создать свою собственную галерею, чтобы отобразить мою работу (вместо использования уже существующей, например, лайтбокс), но я столкнулся с раздражающей проблемой: я попытался отобразить "прямую кнопку" сразу после div, но вместо этого он исчезает во всех следующих div. Вот мой (сжатый) код:

HTML:

<!--navigation buttons for gallery-->
        <a id="back-button"><img src="image.png" /></a>
        <a id="forward-button"><img src="image.png"/></a> 

        <!--gallery begins here-->
        <div id="gallery">

            <div id="first-div" class="work-display">
                <img src="images/albumust-display.png" class="work-image" />
                <div class="caption" id="wd1c">
                    <p class="caption-text">caption</p>
                </div>
            </div>

            <div id="second-div" class="work-display">
                <img src="images/ce-display.png" class="work-image" />
                <div class="caption">
                    <p class="caption-text">caption</p>
                </div>
            </div>

            <div id="third-div" class="work-display">
                <img src="images/display.png" class="work-image" />
                <div class="caption">
                    <p class="caption-text">caption</p>
                </div>
            </div>

CSS (все divs внутри галереи скрыты по умолчанию):

    .work-display {
      display:none;
      position:absolute;
  }

То, что я пытаюсь сделать с Jquery, заключается в том, что каждый раз, когда кто-то открывает миниатюру, дайте соответствующий div, который отображает изображение на полный размер "истинное" состояние "active", а затем исчезает, например:

$( "#thumb-1" ).click(function(){
        $( "#first-div" ).prop("active",true);
        $( "#first-div" ).fadeIn();
    });

все divs изначально имеют состояние "active" = false:

$( "#gallery" ).children("div").prop("active",false);

то это то, что я пытался сделать с помощью кнопки "вперед":

$("#forward-button").click(function () {
        $("#gallery").find( $("div").prop("active",true) )
        .prop("active",false)
        .fadeOut()
        .next().fadeIn();

        $(".caption").fadeIn();
    });

Но тогда то, что он делает, заключается в том, что вместо того, чтобы исчезать только в следующем div, он исчезает во всех делениях, которые появляются после. Что я делаю не так?

Я очень новичок в Javascript/Jquery, поэтому, возможно, это не самый умный способ сделать это, если у вас есть более простое решение, скажите мне.