Как создать кликабельный степпер ⇐ CSS

[Anonymous]

Я ищу решение для создания динамического степпера.
Это каркас:
[img]https://i.stack.imgur .com/UiWpa.png[/img]

Когда пользователь нажимает Монтессон, цвет круга должен измениться на синий, и если он снова нажмет на другую станцию , например, в Бючеле, эта тоже должна стать синей и находиться между двумя станциями.
Если мы нажмем на уже отмеченную станцию, она должна стать серой и все задолго до этого.
На самом деле пользователь может выбрать две или более станций, и между первой и последней станцией весь путь должен быть выделен синим цветом.
Я очень надеюсь, что все понятно
Вот мой код:

Код: Выделить всё

var checkboxes = document.querySelectorAll(
'.StepProgress-item input[type="checkbox"]'
);
checkboxes.forEach((checkbox, index) => {
checkbox.addEventListener("change", function() {
let ordreCheckboxCoché = 1;
if ($(this).is(":checked") && index > 0) {
$(this).parent(".StepProgress-item").prevAll().addClass("is-active");
$(this).parent(".StepProgress-item").nextAll().removeClass("is-active");

console.log("Checkbox cochée en ordre :", ordreCheckboxCoché);
ordreCheckboxCoché++;
}
});

});

Код: Выделить всё

.StepProgress {
position: relative;
display: flex;
flex-direction: column;
list-style: none;
&.inverse {
flex-direction: column-reverse;
}
&:before {
display: inline-block;
content: "";
position: absolute;
top: 11px;
left: 0;
width: 10px;
height: 100%;
border-left: 4px solid #ccc;
}
}

.StepProgress-item {
position: relative;
display: flex;
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
margin-right: 10px;
background-color: $white;
position: relative;
top: 6px;
left: -8px;
&:checked {
border: 1px solid blue;
&:before {
content: "";
background-color: blue;
}
}
&:before {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: #ccc;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
>label {
font-size: 16px;
font-weight: 700;
padding-top: 5px;
span {
font-size: 14px;
font-weight: 400;
}
}
&.subItem {
margin-left: 40px;
input[type="checkbox"] {
&:checked {
&+label {
&:before {
background-color: blue;
}
}
}
}
>label {
position: relative;
&:before {
content: "";
display: inline-block;
position: absolute;
left: -70px;
top: calc(50% + 2px);
width: 30px;
height: 4px;
transform: translateY(-50%);
background-color: gray;
}
}
&.is-active::before {
content: "";
left: -40px;
top: 15px;
height: calc((100% + 45px) / 2);
}
}
}

.StepProgress-item:not(:last-child) {
padding-bottom: 20px;
}

.StepProgress-item.is-active:last-of-type &,
.StepProgress-item.is-active:first-of-type & {
&::before {
content: none;
}
}

.StepProgress-item.is-active::before {
display: inline-block;
content: "";
position: absolute;
/* left: -1px;  */
top: 19px;
height: calc((100% + 51px) / 2);
width: 4px;
background: blue;
}

.StepProgress-item.is-done::before {
border-left: 2px solid green;
}

.StepProgress-item.is-done::after {
content: "✔";
font-size: 10px;
color: #fff;
text-align: center;
border: 2px solid green;
background-color: green;
}

.StepProgress strong {
display: block;
}

Код: Выделить всё

[list]
[*]


Point 1
 12 


[*]


Award an entry
 12 


[*]


Post a contest
 15 


[*]


Handover
 22 


[*]


Provide feedback
 6 


[/list]

Selected option: 

Подробнее здесь: https://stackoverflow.com/questions/783 ... le-stepper