JSFiddle - React, Tailwind, and code Playground

HTML

<form id="slider" data-min="1" data-max="3">
    <div class="tab_img">
        <span class="prev" data-type="3" onclick="ChangeType($(this).data('type'));">назад</span>
        <img class="img" src="type_1.png"  height="50" width = "50"/>
        <span class="next" data-type="2" onclick="ChangeType($(this).data('type'));">вперёд</span>
    </div>
    <div class="tabs_info">
         <div class="type_1 select" data-type="1" onclick="ChangeType($(this).data('type'));">type_1</div>
         <div class="type_2" data-type="2" onclick="ChangeType($(this).data('type'));">type_2</div>
        <div class="type_3" data-type="3" onclick="ChangeType($(this).data('type'));">type_3</div>        
    </div>
    <input type="hidden" name="type" value="1"/>
    <input type="submit" value="Подробнее"/>
</form>

CSS

.select{
    
    color: red;
}

JavaScript

ChangeType = function(numb) {
    $('.img').attr('src', 'type_'+numb.toString());
    
    $('.tabs_info').children().removeClass('select');
    $('.type_'+numb.toString()).addClass('select');
    
    $('input[name="type"]').val(numb);
    
    var sl_max = $('#slider').data('max'),
        sl_min = $('#slider').data('min');
    if($('.prev').data('type')==sl_min) {
       $('.prev').data('type',sl_max); 
    } else { $('.prev').data('type',($('.prev').data('type')-1)) }
    
    if($('.next').data('type')==sl_max) {
       $('.next').data('type',sl_min); 
    } else { $('.next').data('type',($('.next').data('type')+1)) }

}