Простая кнопка «Назад» и «Далее» для горизонтальной прокрутки к следующему элементу div jQuery

(Я знаю, что ранее были некоторые вопросы по этой теме, но я не могу заставить это работать в моей ситуации.) Я хочу иметь возможность прокручивать текст по горизонтали, а также использовать «предыдущий Кнопки «Далее» и «Далее» для навигации по тексту (текст разбит на несколько разделов). Я хочу, чтобы пользователь мог переключаться в любое время. Я знаю, что некоторые решения предлагают установить активный класс для видимого div, но, похоже, это не работает с прокруткой.

Создание кнопки «Далее» не кажется проблемой, но я не могу понять, как заставить предыдущую кнопку работать правильно.

Это то, что у меня есть на jsfiddle.

$(document).ready(function(){
$('#next').click(function() {
   var target;
   $(".section").each(function(i, element) {
     target = $(element).offset().left;
     if (target - 10 > $(document).scrollLeft()) {
       return false; 
     }});
   $("html, body").animate({
     scrollLeft: target
}, 500);
});
});

Я также нашел это решение, в котором кнопка «Далее» не работает, но кажется, что она слишком усложняет ее (или, может быть, действительно необходимо добавить больше div и сделать jQuery чрезвычайно трудным для понимания) jsfiddle

    var currentElement = $("#bodytext > div:nth-child(2)");
var onScroll = function () {
    var container = $("#main");
    var bodytext = $("#bodytext");
    var children = $(".section");
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            console.log(currentElement);
            return;
        }
    }
};

var scrollToElement = function ($element) {
    var container = $("#main");
    var bodytext = $("#bodytext");
    var children = $(".section");
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i === 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 500);
            onScroll();
        }
        if (child.next().length > 0) {
            width += child.next().offset().left - child.offset().left;
        } else {
            width += child.width();
        }
    }
};

var next = function (e) {
    scrollToElement(currentElement);
}

var previous = function (e) {
    var container = $("#main");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
};

$("#main").scroll(onScroll);
$("#next").click(next);
$("#previous").click(previous);

Вы могли бы подумать, что я могу объединить оба решения, что по какой-то причине не работает в данный момент, но в идеале я хотел бы найти довольно простое/чистое решение jQuery. Если у кого-то есть идеи, это было бы очень признательно. Спасибо!