JSFiddle - React, Tailwind, and code Playground

HTML

<div class="s3_tabs">
				<div class="row">
					<div class="col-sm-2 col-xs-4 s3_tab_wrap">
						<button class="s3_tab active">1</button>
					</div>
					<div class="col-sm-2 col-xs-4 s3_tab_wrap">
						<button class="s3_tab">2</button>
					</div>
					<div class="col-sm-2 col-xs-4 s3_tab_wrap">
						<button class="s3_tab">3</button>
					</div>
					<div class="col-sm-2 col-xs-4 s3_tab_wrap">
						<button class="s3_tab">4</button>
					</div>
					<div class="col-sm-2 col-xs-4 s3_tab_wrap">
						<button class="s3_tab">5</button>
					</div>
					<div class="col-sm-2 col-xs-4 s3_tab_wrap">
						<button class="s3_tab">6</button>
					</div>
				</div>
			</div>

			<div class="s3_content">
				<div class="slider">
					1
				</div>
        	<div class="slider">
					2
				</div>
        	<div class="slider">
					3
				</div>
        	<div class="slider">
					4
				</div>
        	<div class="slider">
					5
				</div>
        	<div class="slider">
					6
				</div>
        


				
			</div>

CSS

.slider:not(:first-of-type){
		display: none
    }

JavaScript

$('.s3_tabs .row .s3_tab_wrap').click(function(){

    $('.slider').hide();
    var i = $(this).index();
    $('.slider').eq(i).show();
    $('.s3_tab').removeClass("active");
    $(this).find('.s3_tab').addClass("active");
    console.log(i);
    console.log($('.slider').eq(i).index());

});