JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dotnav">
    <div class="dot active" title="Sign Up"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="hello"></div>
    <div class="dot" title="helloup"></div>
</div>

CSS

.dotnav{
    left: 40px;
    position: absolute;
    top: 50%;
    z-index: 9999;
    display: block;
    /*-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50);*/
}

.dot{
    width:16px;
    height: 16px;
    border-radius:100%;
    border:2px solid #CCCCCC;
    display: block;
    margin-top: 10px;
    cursor: pointer;
    vertical-align; baseline;
}
.dot:hover{
    border: 2px solid #999999;
    background-color: #C9931E;
}
.active{background-color: #C9931E;}

JavaScript

// Use on(), not click(); It's easier to read when in complex code, and you can namespace your event.
// Always pass your event to your annonymous function - saves lots of time if your patterns are the same
$('.dot').on('click.dot', function(e){
   // Remove 'active' class from all siblings in a single line
   // We remove from siblings so that other 'dot' structures can be used without being interfared with
   // If you want multiple set to sync their behaviour - write in data-attr and sync up that way (new question if you want to give that ago)
   $(this).siblings('.dot').removeClass('active');
   // Then, apply to the current clicked on element
   $(this).addClass('active');
})