JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<div class="demo_sub_outer">
		<input class="outer-knob" data-thickness=".1" data-width="150" data-height="150" data-angleOffset=0 data-displayInput="true" data-angleArc=360 data-fgColor="#209652" data-bgColor="#eee" data-inputColor="" data-readOnly="true" value="80">
	</div>
	
	<div class="demo_sub" id="demo_sub_1">
		<input class="inner-knob" id="sexy" data-thickness="0.5" data-width="130" data-height="130" data-angleOffset=0 data-displayInput="false" data-angleArc=360 data-fgColor="#b8dcc7" data-bgColor="#e5e5e5" value="" Title="Cumulative wealthiness" >
	</div>

CSS

.demo_sub_outer{
	height:140px;
	margin: auto;
}
.demo_sub{
	margin: auto;
	position: absolute;
	left:10px; 
	top:10px;
}

JavaScript

$(function($) {
    var prev_ratings = [80, 80, 80]
    
    $('.outer-knob').knob();
    $(".inner-knob").knob({
        change : function (value) {
            var value = $('.inner-knob').val();
            
            var new_ratings = prev_ratings;
            new_ratings.push(+value);
            
            var sum = new_ratings.reduce(function(acc, v) { return acc + v }, 0)
            var new_rating = sum / new_ratings.length;
            
            console.log("------------");
            console.log("new value " + value);
            console.log("new rating " + new_rating);

            $('.outer-knob').val(new_rating);
        },
    });
});