jQuery doesn't work in while loop

[abrahamgarcia27]

I have the following code which is a jquery timer, but i cannot seem to make the jquery function work in a while loop. Does any one have an idea of what i can do?

 

     <?php 
	//begin the while loop

	while ($rows = mysql_fetch_assoc($sql)){
	//if statement for status	
		if($rows[$status] == 1) {
		$status = "Close";
		} else {
		$status = "Open";
		} ?>
          
        	<td><?php echo $rows[$fname]?></td>
            <td><?php echo $rows[$people]?></td>
            <td><?php echo $rows[$tnumber]?></td>
            <td><?php echo $rows[$waiter]?></td>
            <td id="demo1" class="demo"></td>
            <td><?php echo $status ?></td>
        </tr>
        <?php } ?>
    </tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="js/jquery.stopwatch.js"></script>
    <script>
        $(document).ready(function() {
            $('#demo1').stopwatch().stopwatch('start');
          
        });
    </script>
</body>
</html>

 

Here is the code for the Stop Watch

/*
*/

(function( $ ){

    function incrementer(ct, increment) {
        return function() { ct+=increment; return ct; };
    }
    
    function pad2(number) {
         return (number < 10 ? '0' : '') + number;
    }
    
    function formatMilliseconds(millis) {
        var x, seconds, minutes, hours;
        x = millis / 1000;
        seconds = Math.floor(x % 60);
        x /= 60;
        minutes = Math.floor(x % 60);
        x /= 60;
        hours = Math.floor(x % 24);
        // x /= 24;
        // days = Math.floor(x);
        return [pad2(hours), pad2(minutes), pad2(seconds)].join(':');
    }
    
    var methods = {
        
        init: function(options) {
            var settings = {
                updateInterval: 1000, 
                startTime: 0, 
                formatter: formatMilliseconds
            };
            
            if (options) { $.extend(settings, options); }
            
            return this.each(function() {
                var $this = $(this),
                    data = $this.data('stopwatch');
                
                // If the plugin hasn't been initialized yet
                if (!data) {
                    // Setup the stopwatch data
                    data = settings;
                    data.target = $this;
                    data.elapsed = settings.startTime;
                    // create counter
                    data.incrementer = incrementer(data.startTime, data.updateInterval);
                    data.tick_function = function() {
                        var millis = data.incrementer();
                        data.elapsed = millis;
                        data.target.trigger('tick.stopwatch', [millis]);
                        data.target.stopwatch('render', millis);
                    };
                    $this.data('stopwatch', data);
                }
                
            });
        },
        
        start: function() {
            return this.each(function() {
                var $this = $(this),
                    data = $this.data('stopwatch');
                // Mark as active
                data.active = true;
                data.timerID = setInterval(data.tick_function, data.updateInterval)
                $this.data('stopwatch', data);
            });
        },
        
        stop: function() {
            return this.each(function() {
                var $this = $(this),
                    data = $this.data('stopwatch');
                clearInterval(data.timerID);
                data.active = false;
                $this.data('stopwatch', data);
            });
        },
        
        destroy: function() {
            return this.each(function(){
                var $this = $(this),
                    data = $this.data('stopwatch');
                $this.stopwatch('stop').unbind('.stopwatch').removeData('stopwatch');                
            })
        },
        
        render: function(ct) {
            var $this = $(this),
                data = $this.data('stopwatch');
            $this.html(data.formatter(ct));
        },
        
        toggle: function() {
            return this.each(function() {
                var $this = $(this);
                var data = $this.data('stopwatch');
                if (data.active) {
                    $this.stopwatch('stop');
                } else {
                    $this.stopwatch('start');
                }
            });
        }, 
        
        reset: function() {
            return this.each(function() {
                var $this = $(this);
                    data = $this.data('stopwatch');
                data.incrementer = incrementer(data.startTime, data.updateInterval);
                data.elapsed = data.startTime;
                $this.data('stopwatch', data);
            });
        }
    };
    
    
    // Define the function
    $.fn.stopwatch = function( method ) {
        if (methods[method]) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.stopwatch' );
        } 
    };

})( jQuery );

 

[Adam]

You can't repeat the same ID for multiple elements -- IDs are supposed to be unique. The start() method uses an each statement, so assign each element a shared class name and use that in the selector.