JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<p>Please select one of the variants below:</p><br />
<h2>word</h2>
<br />
<input type="hidden" name="word" value="{{ word }}"/><br />
<label class="rad"><input type="radio" name="score" value="var1" />variant1</label>
<label class="rad"><input type="radio" name="score" value="var2" />variant2</label>
<label class="rad"><input type="radio" name="score" value="var3" />variant3</label>
<label class="rad_other"><input type="radio" name="score" value="var4" />variant4</label><br />
<br />
</form>
<div id="myProgress">
  <div id="progressbar">0/50</div>
</div>

CSS

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#progressbar {
  width: 0%;
  height: 30px;
  background-color: #1D1387;
  text-align: center;
  line-height: 30px;
  color: white;
}

JavaScript

$(document).ready(function() {   
   let p = 0;
   $('input[name=score]').change(function(){  
        // progress bar moves on 2% every time the radio button is clicked (form is submitted)
        $('#progressbar').text(++p + "/50");
        $('#progressbar').css('width', function(index, value){
          return (p * 2) + "%";
        });
   });  
  });