Fix to update value dynamically. Resolves #42

index.html

@@ -52,7 +52,7 @@ <h2>Color variants</h2>
             </div>
         </div>
         <!-- /some colors -->
-        
+
         <h2>Custom text</h2>
         <!-- custom text -->
         <div class="clearfix">
@@ -62,6 +62,14 @@ <h2>Custom text</h2>
         </div>
         <!-- /custom text  -->
 
+        <h2>Update value dynamically</h2>
+        <!-- update value dynamically-->
+        <div class="clearfix">
+            <div id="redBecomesBlue" class="red big"></div>
+        </div>
+        <pre>       <a href="javascript:void(0);" id="changeCircle">Fill Circle to 95.5</a><br><br></pre>
+        <!-- /update value dynamically  -->
+
         <h2>Dark theme</h2>
         <!-- .dark-area -->
         <div class="dark-area clearfix">
@@ -130,6 +138,23 @@ <h2>Custom options</h2>
 				percent: 64.5
 			});
         });
+
+        $(document).ready(function(){
+            $("#redBecomesBlue").percircle({percent: 25,text: "25"});
+            $('#changeCircle').click(function(e){
+                e.preventDefault();
+                changeCircle();
+            });
+        });
+
+        function changeCircle(){
+            $("#redBecomesBlue").percircle({text:''});
+            $("#redBecomesBlue").percircle({
+                text: "",
+                percent: 95.5,
+                progressBarColor: "#1252c0"
+            });
+        }
     </script>
 </body>
 </html>

src/js/percircle.js

@@ -66,7 +66,8 @@
                 if (percent > 50) percircle.addClass('gt50');
                 var text = percircle.attr('data-text') || options.text || percent + '%';
 
-                $('<span>'+text+'</span>').appendTo(percircle);
+                percircle.html('<span>'+text+'</span>');
+
                 // add divs for structure
                 $('<div class="slice"><div class="bar" '+progressBarColor+'></div><div class="fill" '+progressBarColor+'></div></div>').appendTo(percircle);
                 if (percent > 50)