Filling up Multiple JQuery Progress Bars dynamically

[kligorurg]

I have a couple of Jquery Progress Bars, which I need to Fill up dynamically, each with a different value.The HTML Code is attached Below:\[code\]<div id="Wrapper"><form method="POST" action="ClearPoll"> <div id="mydiv" class="Gadget"> <input class="PercentageHid" type="hidden" value="http://stackoverflow.com/questions/14415412/36" name="Percentage"> <object class="GadgetActualImage" type="image/jpeg" data="http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"> </object> <div class="Information"> <input class="PollViewName" type="text" value="http://stackoverflow.com/questions/14415412/Potatoe Masher" placeholder="Please Enter the Gadget Name" name="Name" readonly=""> <textarea id="" class="GadgetDescription" name="Comment" cols="10" rows="4" readonly="">You'll Never Stop Mashing ! </textarea> </div> <div id="Potatoe Masher" class="ProgressBar ui-progressbar ui-widget ui-widget-content ui-corner-all" title="Gadget Reputation: 36.0 % " data-options="80" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="36"> <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 36%;"></div> </div> </div></form><form method="POST" action="ClearPoll"> <div id="mydiv" class="Gadget"> <input class="PercentageHid" type="hidden" value="http://stackoverflow.com/questions/14415412/52" name="Percentage"> <object class="GadgetActualImage" type="image/jpeg" data="http://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg"> </object> <div class="Information"> <input class="PollViewName" type="text" value="http://stackoverflow.com/questions/14415412/Butter Slicer" placeholder="Please Enter the Gadget Name" name="Name" readonly=""> <textarea id="" class="GadgetDescription" name="Comment" cols="10" rows="4" readonly="">No More Work </textarea> </div> <div id="Butter Slicer" class="ProgressBar ui-progressbar ui-widget ui-widget-content ui-corner-all" title="Gadget Reputation: 52.0 % " data-options="80" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="36"> <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 36%;"></div> </div> </div>\[/code\]Each Progress bar should take the value in the Hidden input field "Percentage"My Current Javascript file looks like this:\[code\]$(document).ready(function () { var text = $(this).find('[name="Percentage"]').val(); $(function() { alert(text); $('.ProgressBar').progressbar({ value: parseInt(text) }); });});\[/code\]The JavaScript code Works, but it sets the Percentage value to all Progress bar, not to the Respective one.Essentially, what I need is to get the value in the hidden field and apply that value to the progress bar in the same form.Thank You..