JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/pguso/jquery-plugin-circliful/1.0.2/css/jquery.circliful.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/pguso/jquery-plugin-circliful/1.0.2/js/jquery.circliful.js"></script>
<section class="container">

  <h3>Circliful</h3>

  <div class="row">
    <div class="col-lg-2">
      <input id="input" type="text" />
      <div id="submit">Click me</div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-2">
      <div id="test-circle"></div>
    </div>
  </div>
</section>

JavaScript

$(document).ready(function() {
var options = {
    animation: 1,
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 19,
    percent: 39,
    textSize: 32,
    textStyle: 'font-size: 12px;',
    textColor: '#000',
    multiPercentage: 1,
    percentages: [10, 20, 30]
  };
 $("#test-circle").circliful(options);
  
  $('#submit').on('click', function(){
   var deg = $('#input').val();
   options.percent = deg;
   $("#test-circle").find('svg').remove();
   $("#test-circle").circliful(options);
  });
  
});