【jquery】setIntervalとsetTimeoutの組み合わせで、リセットに起こる不具合について

###前提・実現したいこと
片方のアニメーション実行中に、もう片方をリセットしたいです。

jsfiddle：https://jsfiddle.net/uscx4pyf/

###発生している問題

左と右で少し違うアニメーションがあり、いずれも➀➁➂の一連の流れを反復させたいと思っています。

➀水色の正方形が下に降りる
➁その形がかわる
➂グレーの背景が丸くなる

しかし例えば左の➀を実行している途中で、右を実行してみてください。

そのときなぜか左で➂が発生してしまう（左の背景が丸くなってしまう）という不具合が発生していまいます。

右をクリックした時点で左にはresetAnimation()がかかってリセットされるはずなのに（意図しているつもりなのに）、なぜか、左が丸くなってしまうんです。

もちろん左右逆でもそうなります。

###該当のソースコード
すでに上に挙げたjsfiddleのソースコードになります。長いもので申し訳ございませんが、影響範囲や原因が不明なためどこを割愛すべきかかわらず、そのまま掲載させて頂きました。

片方の実行時には、もう片方を完全にリセットするのはどうすべきか、ご協力いただけましたら幸いです。よろしくお願い致します。

html
1<button type="button" class="start" data-type="left">start left</button>
2<button type="button" class="start" data-type="right">start right</button>
3<button type="button" class="reset">reset</button>
4
5<section>
6  <div class="target_left"></div>
7  <div class="target_right"></div>
8</section>

css
1section {
2  display: flex;
3}
4
5div {
6  width: 200px;
7  height: 200px;
8  position: relative;
9  background: gray;
10  margin: 10px;
11}
12
13#box {
14  background: aqua;
15  width: 50px;
16  height: 50px;
17  position: absolute;
18  left: 0;
19  right: 0;
20  margin: 0 auto;
21  border-radius: 0;
22}
23
24.circle {
25  border-radius: 50%;
26}
27

jquery
1// 値をセット
2let intervalAnimation;
3let timeAnimation1,
4    timeAnimation2,
5    timeAnimation3;
6
7// リセットを実行
8$(document).on("click", "button", function() {
9	resetAnimation();
10});
11
12// リセットを定義
13function resetAnimation() {
14  $('#box').remove();
15  $('.target_right').removeClass('circle');
16  $('.target_left').removeClass('circle');
17  clearInterval(intervalAnimation);
18  clearTimeout(timeAnimation1);
19  clearTimeout(timeAnimation2);
20  clearTimeout(timeAnimation3);
21}
22
23// アニメーションを実行
24$(document).on("click", "button", function() {
25  resetAnimation();
26  const type = $(this).attr('data-type');
27  startAnimation(type);
28});
29
30// アニメーションを定義
31function startAnimation(type) {
32  intervalAnimation = setInterval(function() {
33    if (type == 'right') {
34      $('.target_right').append('<div id="box"></div>');
35      $('#box').animate({
36        'bottom': '10px',
37        'marginRight': '50px'
38      }, {
39        'duration': 1000,
40        'complete': function() {
41          const that = $(this);
42          timeAnimation1 = setTimeout(function() {
43            that.css('width', '10px');
44          }, 200);
45          timeAnimation2 = setTimeout(function() {
46            $('.target_right').addClass('circle');
47          }, 400);
48          timeAnimation3 = setTimeout(function() {
49            that.remove();
50            $('.target_right').removeClass('circle');
51          }, 800);
52        }
53      });
54    } else if (type == 'left') {
55      $('.target_left').append('<div id="box"></div>');
56      $('#box').animate({
57        'bottom': '-10px',
58        'marginLeft': '50px'
59      }, {
60        'duration': 1000,
61        'complete': function() {
62          const that = $(this);
63          timeAnimation1 = setTimeout(function() {
64            that.css('width', '100px');
65          }, 200);
66          timeAnimation2 = setTimeout(function() {
67            $('.target_left').addClass('circle');
68          }, 400);
69          timeAnimation3 = setTimeout(function() {
70            that.remove();
71            $('.target_left').removeClass('circle');
72          }, 800);
73        }
74      });
75    }
76  }, 2000);
77}
78