Swiper複数スクロール　停止について

javascript、swiperで複数のスライダー＋スクロールバーで
停止ボタンを付けたいです。単一の時には停止ボタンは動くのですが、
複数の停止ボタンだとうまく動作しません。

どなたかお教えいただけると幸いです。

■■な機能を実装中に以下のエラーメッセージが発生しました。

080-scrollbar.html:147 Uncaught TypeError: Cannot read property 'stop' of undefined

080-scrollbar.html:152 Uncaught TypeError: Cannot read property 'start' of undefined

該当のソースコード

javascript
1<body>
2  <!-- Swiper -->
3  <div class="swiper-container slider1">
4    <div class="swiper-wrapper">
5      <div class="swiper-slide">Slide 1</div>
6      <div class="swiper-slide">Slide 2</div>
7      <div class="swiper-slide">Slide 3</div>
8      <div class="swiper-slide">Slide 4</div>
9      <div class="swiper-slide">Slide 5</div>
10      <div class="swiper-slide">Slide 6</div>
11      <div class="swiper-slide">Slide 7</div>
12      <div class="swiper-slide">Slide 8</div>
13      <div class="swiper-slide">Slide 9</div>
14      <div class="swiper-slide">Slide 10</div>
15    </div>
16    <!-- Add Scrollbar -->
17    <div class="swiper-scrollbar"></div>
18      <p class="stopbtn stop"></p>  <!-- 停止ボタン -->
19
20  </div>
21
22    <!-- Swiper -->
23    <div class="swiper-container slider2">
24      <div class="swiper-wrapper">
25        <div class="swiper-slide">Slide 1</div>
26        <div class="swiper-slide">Slide 2</div>
27        <div class="swiper-slide">Slide 3</div>
28        <div class="swiper-slide">Slide 4</div>
29        <div class="swiper-slide">Slide 5</div>
30        <div class="swiper-slide">Slide 6</div>
31        <div class="swiper-slide">Slide 7</div>
32        <div class="swiper-slide">Slide 8</div>
33        <div class="swiper-slide">Slide 9</div>
34        <div class="swiper-slide">Slide 10</div>
35      </div>
36      <!-- Add Scrollbar -->
37      <div class="swiper-scrollbar"></div>
38    </div>
39
40  <!-- Swiper JS -->
41  <script src="../package/js/swiper.min.js"></script>
42
43  <!-- Initialize Swiper -->
44  <script>
45  var slider1 = new Swiper('.slider1', {
46      slidesPerView: 2,
47      effect: 'fade',
48      autoplay: { delay: 300 }, 
49      centeredSlides: true,
50      scrollbar: {
51          el: '.swiper-scrollbar',
52          draggable:true,
53          clickable: true
54      }
55  });
56 
57  $(window).on('load', function() {
58      $('.stopbtn').on('click', function() {
59          var _class = $(this).attr('class');
60          if (_class == 'stopbtn stop') {
61              $(this)
62                  .addClass('start')
63                  .removeClass('stop');
64                  swiper.autoplay.stop();  
65          } else {
66              $(this)
67                  .addClass('stop')
68                  .removeClass('start');
69                  swiper.autoplay.start(); 
70          }
71      });
72  });
73  </script>
74
75  <!-- Initialize Swiper -->
76  <script>
77    var slider2 = new Swiper('.slider2', {
78        slidesPerView: 2,
79        effect: 'fade',
80        autoplay: { delay: 300 }, 
81        centeredSlides: true,
82        scrollbar: {
83            el: '.swiper-scrollbar',
84            draggable:true,
85            clickable: true
86        }
87    });
88   
89    $(window).on('load', function() {
90        $('.stopbtn').on('click', function() {
91            var _class = $(this).attr('class');
92            if (_class == 'stopbtn stop') {
93                $(this)
94                    .addClass('start')
95                    .removeClass('stop');
96                    swiper.autoplay.stop();  
97            } else {
98                $(this)
99                    .addClass('stop')
100                    .removeClass('start');
101                    swiper.autoplay.start(); 
102            }
103        });
104    });
105    </script>
106
107
108
109  
110</body>