Multiple instances of webusercontrol on the same page.

I have a web user control which has the following code in it:

<script type="text/javascript">
var c= null;

$(function () {
c= new AquaGauge('canvas1');
c.props.startValue = 0;
c.props.stopValue = 100;
});

</script>

<canvas id="canvas1" width="200" height="200"></canvas><br />

If I add 1 to a web page it works fine. If I add 2 or more, only 1 shows. The problem being that if you look at the page source you get the above code multiple times, with the same id and variable names etc.

How do I add multiple instances of the same webusercontrol but treat them individually on the client side?

Thanks in advance!