JSFiddle - React, Tailwind, and code Playground

by alex447

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Question 1<br>
<div class="js-form-item">
  <input type="radio" name="radioQone" id="radioQ11">Option 1<br>
</div>
<div class="js-form-item">
<input type="radio" name="radioQone" id="radioQ12">Option 2<br>
</div>
<div class="js-form-item">
<input type="radio" name="radioQone" id="radioQ13">Option 3<br>
</div>
<br>Question 2<br>
<div class="js-form-item79">
<input type="radio" name="radioQtwo" id="radioQ21">Option 1<br>
</div>
<div class="js-form-item78">
<input type="radio" name="radioQtwo" id="radioQ22">Option 2<br>
</div>
<div class="js-form-item34">
<input type="radio" name="radioQtwo" id="radioQ23">Option 3<br>
</div>
<br>Question 3<br>
<div class="js-form-item111">
<input type="radio" name="radioQthree" id="radioQ31">Option 1<br>
</div>
<div class="js-form-item11">
<input type="radio" name="radioQthree" id="radioQ32">Option 2<br>
</div>
<div class="js-form-item3">
<input type="radio" name="radioQthree" id="radioQ33">Option 3<br>
</div>

<br>Question 3<br>
<div class="js-form-item5">
<input type="radio" name="radioQFOUR" id="radioQ35">Option 1<br>
</div>
<div class="js-form-item-">
<input type="radio" name="radioQFOUR" id="radioQ36">Option 2<br>
</div>
<div class="js-form-itemè">
<input type="radio" name="radioQFOUR" id="radioQ37">Option 3<br>
</div>
<br>
<div id="progressbar"></div>
<div id="percentage">
  <p>fff</p>
</div>

CSS

#progressbar { height:2em; text-align: left; }
#progressbar #progressbar-value {margin: -1px; height:100%; }

JavaScript

$(document).ready(function() {
    $('#progressbar').progressbar({
        value: 0
    });

    $('[type*=radio]').click(function() {
        var totalChecked = 0;
        var totalRadioGroups = 0;
        var previousName = '';
        $.each($('[type*=radio]'), function(index, value) {
            var radioName = $(this).attr('name');
            var radioId = this.id;
            
            if (previousName != radioName) {
                totalRadioGroups++;
            }
            if ($('#' + radioId).is(':checked')) {
                totalChecked++;
            }
            previousName = radioName;
        });
        var percentage = (totalChecked / totalRadioGroups) * 100;
        $('#progressbar').progressbar('value', percentage);
        $('#percentage').html(percentage.toFixed(2) + "%");
    });

});