JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-content" class="header-clear">
        <div id="page-content-scroll">
            <!--Enables this element to be scrolled -->
            <div class="content padding-content-tab">
                <div id="test-tab">
                    <div class="row">
										
                        <ul>
                            <div class="col-xs-4 orange-tab current text-center" data-tab="tabs-1">
                                <li class="tab-link"><a href="#tabs-1">Step 1</a></li>
                            </div>
                            <div class="col-xs-4 orange-tab text-center" data-tab="tabs-2">
                                <li class="tab-link"><a href="#tabs-2">Step 2</a></li>
                            </div>
                            <div class="col-xs-4 orange-tab text-center" data-tab="tabs-3">
                                <li class="tab-link"><a href="#tabs-3">Step 3</a></li>
                            </div>
                        </ul>
                    </div>
										<button id="next" name="next_button" class="next-button">Next</button>
                    <div id="tabs-1" class="tab-content current">
                                123
                    </div>
                    <div id="tabs-2" class="tab-content">
                        456
                    </div>
                    <div id="tabs-3" class="tab-content">
                        789
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.orange-tab a {
  	color: #777;
		padding: 5px 0;
  }
	 .orange-tab.current a {
	 	color: blue;
	 }
	 
  .tab-content {
        display: none;
    }
    
    .tab-content.current {
        display: block;
    }

JavaScript

$('#next').click(function(e) {
        var tab_id = $('ul.tabs .orange-tab.current').attr('data-tab');
        var first = $('ul.tabs .orange-tab:first').attr('data-tab');


        $current = $('ul.tabs div.orange-tab.current').removeClass('current').next();
        $currentTabContent = $('#' + tab_id).removeClass('current').next();

        if ($current.length) {
            $current.addClass('current');
            $currentTabContent.addClass('current');
        } else {
            $('ul.tabs div.orange-tab:first').addClass('current');
            $("#" + first).addClass('current');
        }
				
});