Step by Step or Progress Menu

Question

I was trying to make a step-by-step menu, so I got to that. My intention was to click on the first circle, light step 1 in the color green and move on to the next step, making the line between them green (as is already in the code). And so on until step 3. Any idea how to do this?? Javascript?

.container{
    width: 100%;
}
.progressbar{
    counter-reset: step;
}
.progressbar li{
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
    text-align: center;
}
.progressbar li:before{
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 58%;
    background-color: white;
}
.progressbar li:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}
.progressbar li:first-child:after{
    content: none;
}
.progressbar li.active{
    color: green;
}
.progressbar li.active:before{
    border-color: green;
}
.progressbar li.active + li:after{
    background-color: green;
}

<div class="container">
    <ul class="progressbar">
        <li class="active">Passo 1</li>
        <li>Passo 2</li>
        <li>Passo 3</li>
    </ul>
</div>