JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big_container">
    <div class="navigation">
        <div class="previous"><</div>
        <div class="next">></div>
    </div>
    <div class="wrappers">
        <div class="item" data-content="page 1">Click on meee!</div>
        <div class="item" data-content="page 2">Click on meee!</div>
        <div class="item" data-content="page 3">Click on meee!</div>
    </div>
    <div class="wrappers">
        <div class="item" data-content="page 4">Click on meee!</div>
        <div class="item" data-content="page 5">Click on meee!</div>
        <div class="item" data-content="page 6">Click on meee!</div>
    </div>
    <div class="wrappers">
        <div class="item" data-content="page 7">Click on meee!</div>
        <div class="item" data-content="page 8">Click on meee!</div>
        <div class="item" data-content="page 9">Click on meee!</div>
    </div>
    <div class="details">The content from div goes here:
        <div class="div_content"></div>
    </div>
    </div

CSS

.big_container {
    background: #141414;
    display: block;
    padding: 30px;
}
.wrappers {
    width: 500px;
    margin: 0 auto;
    display: block;
}
.item {
    width: 31%;
    height: 100px;
    margin-right: 1%;
    margin-bottom: 30px;
    text-align: center;
    background: #ccc;
    color: #fff;
    display: inline-block;
}
.details {
    background: #ddd;
    width: 100%;
    padding: 30px;
    display: none;
}
.navigation {
    display: block;
    text-align: center;
    color: #fff;
}
.previous, .next {
    font-size: 18px;
    display: inline-block;
    margin: 0 12px 10px;
    cursor: pointer;
}

JavaScript

var $content = $(".big_container");
var $loaded_content = $(".details");
var $item_selector = $(".item");
var $previous = $('.previous');
var $next = $('.next');

if ($content.length > 0) {
    $item_selector.on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        load_gallery_container($this);
    });

    $next.on('click', function (e) {
        e.preventDefault();

        var $next_item = $content.find('.current').findNext('.item');
        if ($content.find('.item').hasClass('current')) {
            if ($next_item.length) {
                $content.find('.item').removeClass('current');
            }
            load_gallery_container_next_prev($next_item);
        }
    });

    $previous.on('click', function (e) {
        e.preventDefault();

        //var $prev_item = $content.find('.current').findPrev('.item');
        var $prev_item = $(".item")[$(".item").index($(".item.current"))-1];
        if($prev_item){
            $(".item.current").removeClass('current');
        }
        $($prev_item).addClass('current');
        load_gallery_container_next_prev($prev_item);
        
    });


}

//Next all items

$.fn.findNextAll = function (selector) {
    var that = this[0],
        selection = $(selector).get();
    return this.pushStack(!that && selection || $.grep(selection, function (n) {
        return that.compareDocumentPosition(n) & (1 << 2);
        // if you are looking for previous elements it should be & (1<<1);
    }));
}

$.fn.findNext = function (selector) {
    return this.pushStack(this.findNextAll(selector).first());
}

//Previous all items

$.fn.findPreviousAll = function (selector) {
    var that = this[0],
        selection = $(selector).get();
    return this.pushStack(!that && selection || $.grep(selection, function (n) {
        return that.compareDocumentPosition(n) & (1 << 1);
        // if you are looking for previous elements it should be & (1<<1);
    }));
}

$.fn.findPrev = function...