My code dictates that the counter should stop once it reaches 60%, but instead, it continues counting beyond that point indefinitely. How can I rectify this issue and make sure it halts at 60%?
var i = 0;
function counter(tag_name, precent, varname) {
i++;
$(tag_name).html(i + "%");
if (i == precent) clearInterval(varname);
}
var p1 = setInterval(function () {
counter("#p1", 60, p1);
}, 50);
var p2 = setInterval(function () {
counter("#p2", 60, p2);
}, 50);
var p3 = setInterval(function () {
counter("#p3", 60, p3);
}, 50);div {
border:solid 1px black;
margin:1px;
width:50px;
height:30p;
float:left;
}
#m1, #m2, #m3 {
width:200px;
height:60px;
float:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="m1">
<div id="b1">d1</div>
<div id="p1">%</div>
</div>
<div id="m2">
<div id="b2">d2</div>
<div id="p2">%</div>
</div>
<div id="m3">
<div id="b3">d3</div>
<div id="p3">%</div>
</div>