JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
        <a href="#" data-course="l" data-liquidslider-ref="slider-1"><div class="leftarrow">L</div></a>
        <div class="circles">
        <a href="#1" data-liquidslider-ref="slider-1"><div id="firstcircle" class="OneCircle selectedcircle" data-slide = "1"><div class="sliderTriangleOne"><div class="circletext">1</div></div></div></a>
        <a href="#2" data-liquidslider-ref="slider-1"><div id="secondcircle" class="OneCircle" data-slide = "2"><div class="sliderTriangleTwo"><div class="circletext">2</div></div></div></a>
        <a href="#3" data-liquidslider-ref="slider-1"><div id="thirdcircle" class="OneCircle" data-slide = "3"><div class="sliderTriangleThree"><div class="circletext">3</div></div></div></a>
        <a href="#4" data-liquidslider-ref="slider-1"><div id="fourthtcircle" class="OneCircle" data-slide = "4"><div class="sliderTriangleFour"><div class="circletext">4</div></div></div></a>
        </div>
        <a href="#" data-course="r" data-liquidslider-ref="slider-1"><div class="rightarrow">R</div></a>
    </div>

CSS

.selectedcircle {
    margin-left: 3em;
}
.OneCircle {
    font: 0.7em arial;
    transition: all 0.5s;
}

JavaScript

$('a').on('click', function(){
    var course = $(this).data('course'),
        num_a = $('.circles .OneCircle.selectedcircle').index(),
        num = $('.circles .OneCircle'),
        num_s = num.length;
    $(num).removeClass('selectedcircle');
    if (course == 'r') {
        if (num_a != num_s - 1) {
            $(num[num_a + 1]).addClass('selectedcircle');
        }
        else {
            $(num[0]).addClass('selectedcircle');
        }
    }
    else {
        console.log(course,num_a,num);
        if (num_a != 0) {
            $(num[num_a - 1]).addClass('selectedcircle');
        }
        else {
            $(num[num_s - 1]).addClass('selectedcircle');
        }        
    }
});