jQuery progressbar issue

[chrisrulez001]

Hi

 

I'm reading from a MySQL database and then looping though the results with PHP.

 

I'm having an issue of using a progress bar within the loop, it's showing the progress bar but it isn't reading the value of a hidden field with the value.

 

The value of the progress bar should be 200 (value in hidden field) but it's just not showing

 

I've uploaded an image of what's happened.

 

Is there something obvious that I'm not seeing?

 

PHP:

<?php
$List = $this->conn->query("SELECT
			    users.username as Username,
			    challenge.item as Item, SUM(challenge.cost) as Cost
			    FROM users
			    LEFT JOIN challenge
			    ON users.ID = challenge.user_id
			    GROUP BY users.username");
$List->execute();

$row = $List->fetchAll(PDO::FETCH_ASSOC);

echo "<div id=\"Challenge\">";
foreach($row as $user)
{
	echo "<div class=\"ChallengeHeader\">";
	echo $user['Username'];
	echo "<span id=\"ChallengeAction\"><input data-index=\"".$user['Username']."\" type=\"submit\" class=\"ChallengeExpand\" id=\"Expand\" value=\"Expand\" /></span>";
	echo "</div>";
		
	echo "<div id=\"".$user['Username']."\">";
	echo "<div class=\"ProgressBar\"></div>";
	echo "<input class=\"Value\" type=\"hidden\" value=\"".$user['Cost']."\">";
	echo "</div>";
}
echo "</div>";
?>

jQuery:

$(document).ready(function(){
    $("#Challenge").each(function(){
    var $div = $(this);
	
    var val = $div.find(".Value").val();
    $div.find(".ProgressBar").progressbar({
        max: 600,
	value : val
    });
	
    if($div.find(".ProgressBar").progressbar("value") <= 500)
    {
	$div.find(".ProgressBar").css({ 'background': 'White' });
	$div.find(".ProgressBar > div").css({ 'background': 'LightGreen' });
    }
    else
    {
	$div.find(".ProgressBar").css({ 'background': 'White' });
	$div.find(".ProgressBar > div").css({ 'background': 'Red' });
    }
    });
})