My HTML code below displays a scale from 1-5. When a number is clicked, I retrieve the value but the color does not toggle or change permanently. The issue is shown in the attached file.
<div class="row">
<div class="btn-toolbar mr-2" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="likert group">
<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
<a class="btn btn-link disabled ml-5" disabled>Totally Not</a>
<label class="btn btn-success" >
<input type="radio" name="likert" value="1" autocomplete="off">1
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="2" autocomplete="off">2
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="3" autocomplete="off">3
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="4" autocomplete="off">4
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="5" autocomplete="off">5
</label>
<a class="btn btn-link disabled" disabled>Very Much</a>
</div>
</div>
</div>
</div>
https://i.sstatic.net/qg8xy.png
How can I make the toggle effect stay once a number is selected? Is there something missing from the code above? (I am using the Meteor Blaze framework with Bootstrap 4)