Rails - Ajax with unobtrusive javascript Jquery UI Progress Bar -

i want implement progress bar got off jquery ui , set max whatever number user gives , have value set how needed .

i have ajax form volunteers on event show page, , working fine.

however, after try create new volunteer every progress bar on page updates 1 created.

heres javascript threw _stuff partial rendered out:

%ul.thumbnails  - @stuffs.each |stuff|     = javascript_tag          var = parseint($('.quantity-have').text());         var b = parseint($('.quantity-needed').text());         $(".progressbar").progressbar({value: a, max: b }); 

here's link pic of what's going on:

so hit volunteer button on first item..... entered info on volunteer form ajax call made in create action ,

create.js.erb

$("#new_volunteer").hide(); $('.form').fadeout(); $('.overlay').remove(); $('.item-collection').html('<%= j render("stuffs/stuff") %>'); 

just hiding , showing of elements.

i want update progress bar on 1 working on....

working ajax still little new me......

here's entire partial gets rendered out after ajax call

%ul.thumbnails - @stuffs.each |stuff|     = javascript_tag          var = parseint($('.quantity-have').text());         var b = parseint($('.quantity-needed').text());         $(".progressbar").progressbar({value: a, max: b });     %li.span4.items{id: stuff.id}         .thumbnail{style: 'padding-right: 10px; padding-left: 10px; padding-top: 0 !important;'}             - if stuff.photo.file?                 = link_to(image_tag(stuff.photo.url, style: 'height: 200px; width: 300px;'), admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff, style: 'height: 200px; width: 300px;'))              - else                  / = link_to(image_tag('placeholder.jpg'), admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff))             .caption                 %h4                     = link_to stuff.name, admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff), style: 'color: #555555;'                 %b                     item goal:                 %span.quantity-have                     = stuff.quantity_have.to_i                     out of total of                  %b.quantity-needed                     = stuff.quantity_needed                 %br                     .progressbar                         / quantity have:                         / = stuff.quantity_have.to_i                 - if stuff.quantity_needed.to_i == stuff.quantity_have                 - else                     = link_to "volunteer", new_admin_event_stuff_volunteer_path(@admin, stuff.stuffable, stuff), class: 'btn btn-success add-volunteer', remote: true                     - if stuff.buy_link.present?                         = link_to "where buy this", stuff.buy_link, class: 'btn btn-warning volunteer' 

it's being rendered out on show page events model (don't know if that's relevant thought i'd throw in there)

i know why it's doing because in javascript i'm telling find value of 1 of posts need find value of each individual post.

in $(".progressbar").progressbar({value: a, max: b }); line you're initializing progress bar on all existing progress bars - need make sure you're targeting relevant 1 in loop.

to try setting id on each progress bar unique, eg: .progressbar{id:"progressbar-#{stuff.id}"} , changing javascript reference specific id well: $("#progressbar-#{stuff.id}").progressbar({value: a, max: b });