jQuery 一定の位置までスクロールをした後に発火するはずのグラフのパーセンテージ処理がうまくいかない

前提・実現したいこと

・ある特定の場所までスクロールをしたらグラフがそれぞれの値に動くようにしたい
・クラス名percentが10%からスタートし、class="percent"の数値まで数字が増えて表示される

下記のサイト様の１１番目の横棒グラフを参考に作成。
https://deshinon.com/2019/03/02/kopipe-web-bou-gragh/

もし可能であるならば、if文の条件は一緒なのでスキルバーの動きとパーセンテージの動きのコードをまとめられたらとも考えております。
（１つのif文で２つの処理は可能なのでしょうか）

発生している問題

1.単位に%がつかない
2.最初から数字が目的の値となっている（理想は１０％から７０％に増えてほしいのに、最初から７０という値になっている）
3.高さに応じて正常に動作する時としない時がある。（ページのトップにあれば正常に動くが、例えばスクロールをしなくては見れない位置にある時は正常に動かないで2のようになる）
4.スキルバーについては正常に作動している（ある一定の位置まで来たら発火し動作してくれる）

該当のソースコード

HTML5
1<h1 class="skill">HTML</h1>
2<div class="bar">
3　　　　<div class="bar-info" data-total="60"></div>
4　　　　<div class="percent">60</div>
5</div>
6<h1 class="skill">CSS</h1>
7<div class="bar">
8　　　　<div class="bar-info" data-total="50"></div>
9　　　　<div class="percent">50</div>
10</div>

jquery
1$(window).on('scroll', function (){
2
3    var barInfo = $('.bar-info');
4    var percent = $('.percent');
5//グラフのバーの動作
6    barInfo.each(function () {
7    
8        var barInfoOffset = $(this).offset().top; 
9        var scrollPos = $(window).scrollTop();
10        var wh = $(window).height();
11        var total = $(this).data("total");
12        var $this = $(this);
13
14        if(scrollPos > barInfoOffset - wh + (wh / 4) ){
15            $this.css("width", total + "%");
16        }
17    });
18
19//グラフのパーセンテージの動作
20    percent.each(function () {
21        var percentOffset = $(this).offset().top;
22        var scrollPos = $(window).scrollTop();
23        var wh = $(window).height();
24        var $this = $(this);
25
26        if(scrollPos > percentOffset - wh + (wh / 4) ){
27            $({
28                Counter: 10
29            }).animate({
30                Counter: $this.text()
31            }, {
32                duration: 3000,
33                easing: 'swing',
34                step: function() {
35                    $this.text(Math.ceil(this.Counter) + "%");
36                }
37            });
38        }
39    });