JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list-item" style="margin-bottom: 50px">
  <div class="item">
    <input id="item1" type="checkbox" name="item1" value="10">
    <label for="item1">item1</label>
  </div>
  <div class="item">
    <input id="item2" type="checkbox" name="item2" value="10" checked="">
    <label for="item2">item2</label>
  </div>
  <div class="item">
    <input id="item3" type="checkbox" name="item3" value="10">
    <label for="item3">item3</label>
  </div>
  <div class="item">
    <input id="item4" type="checkbox" name="item4" value="20">
    <label for="item4">item4</label>
  </div>
  <div class="item">
    <input id="item5" type="checkbox" name="item5" value="5">
    <label for="item5">item5</label>
  </div>
  <div class="item">
    <input id="item6" type="checkbox" name="item6" value="10">
    <label for="item6">item6</label>
  </div>
  <div class="item">
    <input id="item7" type="checkbox" name="item7" value="5">
    <label for="item7">item7</label>
  </div>
  <div class="item">
    <input id="item8" type="checkbox" name="item8" value="10">
    <label for="item8">item8</label>
  </div>
  <div class="item">
    <input id="item9" type="checkbox" name="item9" value="5">
    <label for="item9">item9</label>
  </div>
</div>
<div class="attainments">
  <div class="speedometer">
    <svg width="254" height="127" viewBox="0 0 254 127" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="arrow-speedometr" fill-rule="evenodd" clip-rule="evenodd" d="M130.851 126C129.678 126.001 128.516 125.761 127.433 125.293C126.351 124.826 125.369 124.141 124.546 123.278C123.722 122.414 123.073 121.391 122.636 120.266C122.199 119.141 121.983 117.937 122.001 116.725L131 62L140 116.824C139.94 119.286 138.949 121.625 137.239 123.34C135.529 125.055 133.237 126.009 130.854 125.998L130.851 126Z" fill="#3E3D40"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 126.939C0.0136223 107.672 4.45526 88.6672 12.9819 71.3906C21.5085 54.114 33.892 39.0283 49.176 27.2986L84.018 69.6476C65.36...

CSS

.count {
  margin-top: 30px;
  font-size: 50px;
  line-height: 22px;
  font-weight: 900;
  color: #0093d7;
}

.arrow-speedometr {
  transform-origin: 51% 95%;
  transform: rotate(-85deg)
}

JavaScript

$(document).ready(function() {


let sum = $('.home .skills .list-item .item input[type="checkbox"]:checked').val();
    const output = $('#count');
    const outputDefault = output.text(sum)
    const arrowSkill = $('.arrow-speedometr');
    const checkboxes = document.querySelectorAll('.list-item input[type="checkbox"]').forEach(c => c.addEventListener('change', recalcArrowAngle));
    console.log(checkboxes);
    
    function recalcArrowAngle() {
      sum = 0
        $(':checkbox:checked').each(function(i, element) {
          sum += (cVal = parseFloat($(element).val())) && !isNaN(cVal) ? cVal : 0;
          })

          console.log(sum);
        arrowSkill.animate({
            rotation: -90 + (sum * 180) / 100
          }, {
            duration: 500,
            easing: 'linear',
            step: function(rotation) {
              arrowSkill.css({
                transform: 'rotate(' + (Math.ceil(rotation)) + 'deg)'
              });
            }
          });

        output.animate({
          val: -90 + (sum * 180) / 100
        }, {
          duration: 500,
          easing: "linear",
          step: function(val) {
            output.text(Math.ceil(val) * 10);
          }
        });
    }


})