Как сделать, чтобы табы переключались с помощью кнопок?

[IsayR]

Всем привет! Подскажите, пожалуйста, как сделать так, чтобы у меня табы переключались с помощью кнопок "Назад" и "Следующая" с js/jquery. Еще, когда я хочу вернуться назад и нажимаю на предыдущую ячейку, ничего не срабатывает, но когда нажимаю следующую, все прекрасно работает. В общем, у меня какой то кривоватый таб:) Подскажите, пожалуйста! 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
        <div class="tab active">
            <div class="tab__content">
                <ul class="steps">
                    <li class="step active">1</li>
                    <li class="step">2</li>
                    <li class="step">3</li>
                </ul>
                <h2>Заголовок 1</h2>
                <p>Текст 1</p>
                <button class="btnNext">Следующая</button>
            </div>
        </div>
        <div class="tab">
            <div class="tab__content">
                <ul class="steps">
                    <li class="step">1</li>
                    <li class="step active">2</li>
                    <li class="step">3</li>
                </ul>
                <h2>Заголовок 2</h2>
                <p>Текст 2</p>
                <button class="btnNext">Следующая</button>
                <button class="btnPrev">Назад</button>
            </div>
        </div>
        <div class="tab">
            <div class="tab__content">
                <ul class="steps">
                    <li class="step">1</li>
                    <li class="step">2</li>
                    <li class="step active">3</li>
                </ul>
                <h2>Заголовок 3</h2>
                <p>Текст 3</p>
            </div>
        </div>
    </div>

ul,li {
    display: block;
    cursor: pointer;
}
.tabs {
    margin: 50px;
}
.steps {
    display: flex;
    position: absolute;
    top: 0px;
    left: 35px;
}
.step {
    display: flex;
    margin-right: 15px;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 1px solid red;
}
.step.active{
    background: green;
}

.tab {
    padding: 20px;
    background: blue;
    width: 300px;
    height: 200px;
    border-radius: 20px;
    display: none;
}

.tab.active {
    display: block;
}

(function($) {
$(function() {
  $('ul.steps').on('click', 'li:not(.active)', function() {
    $(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tab').removeClass('active').eq($(this).index()).addClass('active');
  });   
});
})(jQuery);