JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ans-images-box">
  <div class="ans-cell-images">
            <span class="num-cell">1</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">2</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">3</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">4</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">5</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">6</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">7</span>
            <div class="ans"></div>
        </div>
        <div class="ans-cell-images">
            <span class="num-cell">8</span>
            <div class="ans"></div>
        </div>
</div>
<div id="number">Next</div>

CSS

ul {
  list-style-type: none;
  padding: 1em;
}
li {
  border: solid 1px gray;
  margin: 5px;
}
.selected {
  background-color: orange;

}
.ans{
   height: 82px;
    width: 82px;
}

JavaScript

$('#ans-images-box').on('click', '.ans', function(){
    $(this).addClass('selected')
        .siblings().removeClass('selected')
});

$('#number').on('click', function(){
    $next = $('#ans-images-box .selected').next();
    if ($next.length) {
        $next.click()
    } else {
        $('#ans-images-box .ans:first').click()
    }
});

$('#ans-images-box .ans:first').click();