JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="parent">
    <div class="item active">DIV 1</div>
    <div class="item">DIV 2</div>
    <div class="item">DIV 3</div>
    <div class="item">DIV 4</div>
    <div class="item">DIV 5</div>
    <div class="item">DIV 6</div>
</div>
<div class="showbox"></div>
<br />
<div class="prev dir">PREV</div> - <div class="next dir">NEXT</div>
<br />
<input type="text" name="test" class="test" value="" />

CSS

.active{
    color:red;
    background-color:yellow;
}
.item:not(.active){
    opacity:0.5;
    cursor:pointer;
}
.dir{
    display:inline-block;
    cursor:pointer;
}
.showbox{
    position:absolute;
    top:0;
    left:150px;
    width:200px;
    height:50px;
    text-align:center;
    border:1px solid black;
}
.parent{
    width:100px;
}

JavaScript

$('.next').on('click', getNext);
    $('.prev').on('click', getPrev);
    $('.item').on('click', addActive);
    $('.test').on('keyup', getInput);
    $('.test').val($('.item.active').index()+1);


function getNext() {
    var $curr = $('.item.active').removeClass('active'),
        $next = ($curr.next().length) ? $curr.next().addClass('active') : $('.item').first().addClass('active');
    $('.test').val($next.index() + 1);
    showInBox();
}

function getPrev() {
    var $curr = $('.item.active').removeClass('active'),
        $next = ($curr.prev().length) ? $curr.prev().addClass('active') : $('.item').last().addClass('active');
    console.log($('.item.active').index());
        $('.test').val($next.index() + 1);
        showInBox();
}
    
function addActive(){
    $('.item.active').removeClass('active');
    $(this).addClass('active');
    $('.test').val($('.item.active').index() + 1);
    showInBox();
}

function getInput(){
   var $curr = $('.test').val() - 1;
    if($curr > $('.item').length - 1 || !$.isNumeric($curr)){
        $('.test').val('Nu exista!');        
    }else{
   $('.item.active').removeClass('active');
   $('.item').eq($curr).addClass('active');
            showInBox();
    }
}

function showInBox(){
    var $curr = $('.item.active').html();
    $('.showbox').html($curr);
}