JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test by salih0vicX</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>

</head>
<body>
<input type="text" id="c1" class="dial" value="10075">
<input type="text" id="c2" class="dial" value="3434">
</body>
</html>

JavaScript

$(document).ready(function () {
      //dynamically add the knob with min and max value
      //Addknob(0, 10);
      //each 1 second increase value to 1
      setInterval(increasevalue, 1000);
       setInterval(increasevalue1, 1000);
    });
   

    function increasevalue() {
      var val = parseInt($("#c1").val());
    
     
      //increase the value and trigger the change
      $("#c1").val(val).trigger('change');
    
      //the change handler to set the color etc
      changehandler();
    
    }
 function increasevalue1() {
      var val = parseInt($("#c2").val());
    
     
      //increase the value and trigger the change
      $("#c2").val(val).trigger('change');
    
      //the change handler to set the color etc
      changehandlerr();
    
    }
    function Addknob(min, max,fg,bg) {
      $("#div").empty();
      //$('#div').append($('<input type="text" value="30" class="dial"/>'));
      //configure the knob
      $("#c1").knob({
        min: min,
        max: max,
        step: 1,
        fgColor: fg,
        bgColor: bg
      });
      $("#c1").val(val).trigger('change'); 
     
    }
    
    function Addknob1(min, max,fg,bg) {
      $("#div").empty();
      //$('#div').append($('<input type="text" value="30" class="dial"/>'));
      //configure the knob
      
      $("#c2").knob({
        min: min,
        max: max,
        step: 1,
        fgColor: fg,
        bgColor: bg
      });
      $("#c2").val(val).trigger('change');//set the min value
    }

    function changehandler() {
      var val = parseInt($("#c1").val()); //get current value
      if (val > 0 && val <= 5000) {
        //$('.dial').trigger( 'configure', { "fgColor": "#000"} ); //change color according to value
          Addknob(0, 5000,"red","#eee");
      }
      else if (val >= 5001 && val < 10000) {
      //  $('.dial').trigger('configure', { "fgColor": "#000" });
          Addknob(5001, 10000,"green","yellow");
      }
      else if(val >= 10001 && val < 15000) {
   ...