Question

I have this code here which gives a progress bar for check boxes. I want to use multiple such progress bars in single page. How do I recall the function uniquely for each div?

$(window).load(function(){
$(function() {
    $("#remind").progressbar({
        value: 0,
        max: 100,
        textFormat: 'fraction',
        complete: function(event, ui) {
            alert("Job complete you lazy bum!");
        }
    });

    $('.option').on('change', function() {
        var total = 0;

        $('.option:checked').each(function() {
            total += parseInt($(this).val());
        });

        $("#remind").progressbar("value", total);
    });

});
});

This is the html part,

<div id="remind"></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 do I have another div of same functionality work without interfering the other and yet without writing all the js with changed class and id names.

Answer 1

Well if the div holding the options ALWAYS follow the progressbar div you could use this connection in your script, ( line beginning with: + should be used instead of line with: – )

instead of id use class “remind”:

+<div class="remind"></div> 
-<div id="remind"></div>

initialize progressbar by class instead of id:

+$(".remind").progressbar({
-$("#remind").progressbar({

use a localized search for the other checked options inside of the parent (div):

+$(this).parent().find('.option:checked').each(function() {
-$('.option:checked').each(function() {

and finally use the HTML structure to increase progress with prev div option:
*here plays the first sentence of my answer his role

+$(this).parent().prev('div.remind').progressbar("value", total);
-$("#remind").progressbar("value", total);

And welcome to stackoverflow! [:

Here is a jsFiddle to see it work.