JSFiddle - React, Tailwind, and code Playground

by wwt

HTML

<div class="left-arrow"> << </div>
<div class="right-arrow"> >> </div>
<div class="first-line">
    <div class="anywrap">
    <div class="number active item">1</div>
    <div class="number item">2</div>
    <div class="number item">3</div>
    <div class="number item">4</div>
    <div class="number item">5</div>
    </div>
</div>
<div class="second-line">
    <div class="wrap">
    <div class="anotherclass item active">1</div>
    <div class="anotherclass item">2</div>
    <div class="anotherclass item">3</div>
    <div class="anotherclass item">4</div>
    <div class="anotherclass item">5</div>
     </div>
</div>
<div class="line3">
    <div class="wrap">
    <div class="onemoreclass item active">1</div>
    <div class="onemoreclass item">2</div>
    <div class="onemoreclass item">3</div>
    <div class="onemoreclass item">4</div>
    <div class="onemoreclass item">5</div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.first-line, .second-line, .line3 {
    margin-top: 20px;
}
.second-line, .line3 {
    margin-left: 20px;
}

.second-line {
    width: 200px;
    overflow: auto;
}
.line3 {
    width: 200px;
    overflow: hidden;
}
.wrap {
    width: 500px;
}
.number, .anotherclass, .onemoreclass {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    border: 1px solid blue;
    text-align: center;
    margin: 0 10px;
}

.right-arrow, .left-arrow {
    display: inline-block;
    cursor: pointer;
    margin: 0 20px;
}

.number.active, .anotherclass.active, .onemoreclass.active {
    background: blue;
    color: #fff;
}

JavaScript

$('.item').click(function() {
	$this = $(this);
	$(".item").removeClass("active");
    
	$('.item').each(function(){
    	if(+$(this).text() == +$this.text()){
        	$(this).addClass('active');
        }
    });
});