JavaScript-Dot navigation

How can i code the javascript or jqueary so that when i click on a dot the dot gets an active class but the previous dots class is 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;}

if you could help me code this that would be awesome

How can i code the javascript or jqueary so that when i click on a dot the dot gets an active class but the previous dots class is removed