Обновите код на Codepen в блоке html на этот.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<input type="number" id="input">
<span id="btn" onclick="btn()">Подтвердить</span>
<div class="timeProgress">
<input value="0" class="CNF">
<h3><span id="result">0</span>/3</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://website-about.neocities.org/arcana/knob/jquery.knob.min.js"></script>
<script type="text/javascript">
let result_txt = document.getElementById('result');
function btn() {
var value_input = document.getElementById("input").value;
// Меняем значение кноба и инициализируем (trigger) перерисовку
$('.CNF')
.val(value_input)
.trigger('change');
result_txt.innerHTML = value_input;
}
$(document).ready(function() {
$(".CNF").knob({
'min': 0,
'max': 3,
'readOnly': true,
'width': '100%',
'thickness': 0.2,
'displayInput': false,
'bgColor': 'lightskyblue',
'fgColor': 'navy',
'angleOffset': 0,
'angleArc': 360
})
})
</script>
</body>
</html>
Обращаю ваше внимание, что лучше не мешать нативный JS с JQuery. Читать менее удобно. Если вы уже подключили jQuery то лучше использовать его синтаксис для получения элементов, вдобавок он короче и приятнее и не мешать с нативными getElementById и т.п.
И в Codepen правильнее подключать JS библиотеки в блоке JS, там где "шестеренка" настроек. и весь JS код вставлять в блок JS
Почистил ваш вариант под Codepen и перевел код для jQuery (функция нажатия кнопки перенесена в код JS)
Codepen 
