jquery - JavaScript-Dot navigation -

how can code javascript or jquery when click on dot dot gets active class previous dots class removed?

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="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; } 

how can code javascript or jquery when click on dot, dot gets active class, previous dots class removed?

$('.dot').on('click', function() {     $('.dot.active').removeclass('active');     $(this).addclass('active'); });