Как реализовать заполнение прогресс бара при нажатии на radio + заполнение формы

Помогите, пожалуйста, реализовать прогресс бар. Если что, я — нуб. Я написал вот такой html, где в форму входят 5 тестов radio, два input: имя и телефон, и один select. При выборе одного из вариантов в тесте в прогресс бар должно прибавляться какое-то значение в процентах, а так же при заполнении имени, номера и выборе города. Желательно бы реализовать на JS, но в целом любой вариант будет мне полезен. Я JS только недавно начал изучать и сам вообще не представляю, как это можно реализовать. Ну или дайте хотя бы наводку, в какую сторону копать. Буду очень благодарен за помощь!

<form class="form" action="mailer/smart.php">
                <div class="quiz__questions">
                    <div class="quiz__test">
                        <h3>Сумма займа, рублей</h3>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="sum-1" name="sum" value="100 000 - 500 000 руб.">
                                <span>100 000 - 500 000 руб.</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="sum-2" name="sum" value="500 000 - 1 000 000 руб.">
                                <span>500 000 - 1 000 000 руб.</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="sum-3" name="sum" value="1 000 000 - 3 000 000 руб.">
                                <span>1 000 000 - 3 000 000 руб.</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="sum-4" name="sum" value="3 000 000 - 10 000 000 руб.">
                                <span>3 000 000 - 10 000 000 руб.</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="sum-5" name="sum" value="10 000 000 - 30 000 000 руб.">
                                <span>10 000 000 - 30 000 000 руб.</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="quiz__test">
                    <h3>Срок займа, месяцев</h3>
                    <div class="quiz__option">
                        <label class="quiz__radio">
                            <input type="radio" id="time-1" name="time" value="От 6 до 12 месяцев">
                            <span>От 6 до 12 месяцев</span>
                        </label>
                    </div>
                    <div class="quiz__option">
                        <label class="quiz__radio">
                            <input type="radio" id="time-2" name="time" value="От 12 до 24 месяцев">
                            <span>От 12 до 24 месяцев</span>
                        </label>
                    </div>
                    <div class="quiz__option">
                        <label class="quiz__radio">
                            <input type="radio" id="time-3" name="time" value="От 24 до 48 месяцев">
                            <span>От 24 до 48 месяцев</span>
                        </label>
                    </div>
                    <div class="quiz__option">
                        <label class="quiz__radio">
                            <input type="radio" id="time-4" name="time" value="От 48 до 60 месяцев">
                            <span>От 48 до 60 месяцев</span>
                        </label>
                    </div>
                </div>

                <div class="quiz__test">
                    <h3>Вид займа</h3>
                    <div class="quiz__option">
                        <label class="quiz__radio">
                            <input type="radio" id="kind-1" name="kind" value="Займ в банке">
                            <span>Займ в банке</span>
                        </label>
                    </div>
                    <div class="quiz__option">
                        <label class="quiz__radio">
                            <input type="radio" id="kind-2" name="kind" value="Займ у частного инвестора">
                            <span>Займ у частного инвестора</span>
                        </label>
                    </div>
                </div>

                <div class="quiz__questions">
                    <div class="quiz__test">
                        <h3>Объект залога</h3>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="object-1" name="object" value="Дом">
                                <span>Дом</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="object-2" name="object" value="Квартира">
                                <span>Квартира</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="object-3" name="object" value="Комната">
                                <span>Комната</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="object-4" name="object" value="Коммерция">
                                <span>Коммерция</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="object-5" name="object" value="Земельный участок">
                                <span>Земельный участок</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="quiz__questions">
                    <div class="quiz__test">
                        <h3>Куда отправить решение о займе?</h3>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="send-1" name="send" value="Телефон">
                                <span>Телефон</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="send-2" name="send" value="WhatsApp">
                                <span>WhatsApp</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="send-3" name="send" value="Viber">
                                <span>Viber</span>
                            </label>
                        </div>
                        <div class="quiz__option">
                            <label class="quiz__radio">
                                <input type="radio" id="send-4" name="send" value="Telegram">
                                <span>Telegram</span>
                            </label>
                        </div>
                    </div>
                </div>
            

            <div class="contacts">
                <h3 class="contact">Ваши контактные данные</h3>
                
                    <input name="name" placeholder="Ваше имя" type="text">
                    <input name="phone" placeholder="Номер телефона">

                    <select name="city" placeholder="Город">
                        <option value="">Город</option>
                        <option value="Москва">Москва</option>
                        <option value="Самара">Самара</option>
                        <option value="Санкт-Петербург">Санкт-Петербург</option>
                    </select>

                    <button data-modal="thanks">Получить одобрение</button>
                

                <div class="contacts__policy">Нажимая кнопку, вы даёте согласие на обработку персональных данных согласно
                    <a href="#">политике конфиденциальности</a></div>
            </div>
            </form>

На всякий случай html самого бара

<div class="quiz__left">
            <div class="quiz__progress">
                <div class="quiz__subdescr">
                    Вы прошли почти весь путь до одобрения
                </div>
                <div class="quiz__percent">
                    94%
                </div>
                <div class="quiz__progressbar">
                    <div class="quiz__load">

                    </div>
                </div>
                <div class="quiz__subtext">
                    осталось совсем немного, чтобы получить деньги
                </div>
            </div>
        </div>