my jquery plugin cant be clled more than once
i am developing a jquery plugin that animate canvas arc from 0 degree to another degree, but when i call it more than once it just apllied to last one
it is my html code
<div id="can">
<div id="o">
<canvas width="200" height="200" data-num="94"></canvas>
%
<span></span>
</div>
<div id="b">
<canvas width="200" height="200" data-num="56"></canvas>
%
<span></span>
</div>
<div id="c">
<canvas width="200" height="200" data-num="77"></canvas>
%
<span></span>
</div>
<div id="d">
<canvas width="200" height="200" data-num="14"></canvas>
%
<span></span>
</div>
</div>
and this is my jquery code
$.fn.anima= function(){
var a= this.children("canvas")[0];
ctx= a.getContext("2d");
var width= a.width;
var height= a.height;
var i=0;
function sadegh(){
i= i+1;
ctx.beginPath();
ctx.arc(width/2, height/2, 100, -.5* Math.PI , ((i/50)-.5)* Math.PI, false );
ctx.strokeStyle = '#3ed9e7';
ctx.textAlign="center";
ctx.fontSize= 40;
ctx.lineWidth= 5;
ctx.stroke();
if (i<50){
setTimeout(sadegh,30);
}
}
sadegh();
}
var o= $("#o");
var b= $("#b");
var c= $("#c");
var d= $("#d");
o.anima();
b.anima();
c.anima();
d.anima();