I am working on a code snippet that creates progress bars for checkboxes. My goal is to have multiple progress bars on the same page. How can I trigger the function uniquely for each div?
$(window).load(function(){
$(function() {
$("#reminder").progressbar({
value: 0,
max: 100,
textFormat: 'fraction',
complete: function(event, ui) {
alert("Task completed successfully!");
}
});
$('.option').on('change', function() {
var total = 0;
$('.option:checked').each(function() {
total += parseInt($(this).val());
});
$("#reminder").progressbar("value", total);
});
});
});
Here is the corresponding HTML part,
<div id="reminder"></div>
<div>
<input type="checkbox" class="option" value="25"> Task 1<br>
<input type="checkbox" class="option" value="25"> Task 2<br>
<input type="checkbox" class="option" value="25"> Task 3<br>
<input type="checkbox" class="option" value="25"> Task 4<br>
</div>
How can I implement another div with the same functionality without causing interference and without duplicating all the JavaScript code with altered class and ID names.