Multiple setInterval() using array - arrays

Question

I want to animate all three circles using this one script.
But to achieve this, I need to create 3 variables like 'c1' right?
I got the code to work by duplicating everything:
http://jsfiddle.net/JwkYm/339/
It has to be easier then this. Thanks for your help in advance.
(function () {
// math trick 2*pi*57 = 358, must be less than 360 degree
var circleArr = ['orange-halo','orange-halo2','orange-halo3'];
var myTimerArr = ['myTimer','myTimer2','myTimer3'];
var interval = 30;
var angle = [0,0,0];
var angle_increment = 6;
var c1 = setInterval(function () {
var x = 0;
while(x >= 2)
{
document.getElementById(circleArr[x]).setAttribute("stroke-dasharray", angle[x] + ", 20000");
document.getElementById(myTimerArr[x]).innerHTML = parseInt(angle[x]/360*100) + '%';
if (angle[x] >= 270)
{
c1.clearInterval(c1.timer);
}
angle[x] += angle_increment;
x++;
}
}.bind(this), interval);
#myTimer, #myTimer2, #myTimer3 {
fill: #000099;
font-size: 40px;
font-family: Myriad light;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
<circle cx="100" cy="100" r="73" id="blue-halo" fill="none" stroke="#000099" stroke-width="30" />
<circle cx="100" cy="100" r="73" id="orange-halo" fill="none" stroke="#FD6400" stroke-width="31" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
<text id="myTimer" text-anchor="middle" x="100" y="110">0%</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
<circle cx="100" cy="100" r="73" id="blue-halo2" fill="none" stroke="#000099" stroke-width="30" />
<circle cx="100" cy="100" r="73" id="orange-halo2" fill="none" stroke="#FD6400" stroke-width="31" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
<text id="myTimer2" text-anchor="middle" x="100" y="110">0%</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
<circle cx="100" cy="100" r="73" id="blue-halo2" fill="none" stroke="#000099" stroke-width="30" />
<circle cx="100" cy="100" r="73" id="orange-halo2" fill="none" stroke="#FD6400" stroke-width="31" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
<text id="myTimer3" text-anchor="middle" x="100" y="110">0%</text>
</svg>
http://jsfiddle.net/JwkYm/341/