スライダーを2つに増やすとと１つしか動かなくなる

スライダーを2つに増やしたいのですが、増やすとと１つしか動かなくなってしまいます。
即時関数使って囲った方が良いのかなと思い試したのですが、そうするとsetIntervalが動かないのか、自動で画像が切り替わらなくなってしまいうまくいきませんでした。
一つの命令で両方のスライダーをどう動かしたら良いのか分からなかったので、とりあえずコピーしてスライダーの１と２としてclass、id、変数名を変えて見たのですが、そうするとスライダーの２しか動かなくなってしましました。
何か良い方法がありましたら教えて頂けるとありがたいです。よろしくお願いいたします。

macOS Catalina　10.15.3
ブラウザはsafariとクロームを使ってます。

html
1<!-------slider１------------->
2<div class="slider-box">
3  <div id="slider">
4    <div class="slide display"><img src="img/top1.jpg"></div> <!---先頭displayつけないと初回表示何もなくなる--->
5    <div class="slide"><img src="img/top2.jpg"></div>
6  </div>
7  <span class="toolbar">
8    <span class="slide-button">
9        <span id="prev" class="prev"><img class="ml-2 arrow_w" src="img/img_arrow_left.svg"></span>
10        <span id="next" class="next"><img class="mr-2 arrow_w" src="img/img_arrow.svg"></span>
11    </span>
12  </span>
13</div>
14
15<!-------slider2------------->
16<div class="slider-box">
17  <div id="slider2">
18    <div class="slide display"><img src="img/top1.jpg"></div> <!---先頭displayつけないと初回表示何もなくなる--->
19    <div class="slide"><img src="img/top2.jpg"></div>
20  </div>
21  <span class="toolbar">
22    <span class="slide-button">
23        <span id="prev2" class="prev"><img class="ml-2 arrow_w" src="img/img_arrow_left.svg"></span>
24        <span id="next2" class="next"><img class="mr-2 arrow_w" src="img/img_arrow.svg"></span>
25    </span>
26  </span>
27</div>
28

js
1/*------sliderの記述 --------*/
2
3    var current = 0;
4    var slider = document.getElementById('slider').getElementsByTagName( 'div' );
5
6    window.onload = function start() {
7        var time = setInterval("changeImage(1)",5000); /*スライド時間コントロール②*/
8
9        document.getElementById('prev').onclick = function() {
10                changeImage(-1);
11                clearInterval(time);
12                time = setInterval("changeImage(1)",5000); /*スライド時間コントロール②*/
13            };
14            document.getElementById('next').onclick = function() {
15                changeImage(1);
16                clearInterval(time);
17                time = setInterval("changeImage(1)",5000); /*スライド時間コントロール②*/
18            };
19    };
20 
21    var changeImage = function(num) {
22        for(var i = 0; i < slider.length; i++){
23        slider[i].classList.remove('display');
24        }
25    
26    if(current + num >= 0 && current + num < slider.length) {
27        current += num; 
28        tog_display();   
29    }else if (current + num >= slider.length){
30        current = 0; 
31        tog_display(); 
32    }else if (current + num < 0){
33        current = slider.length -1 ; 
34        tog_display(); 
35    }
36 
37    function tog_display(){
38        slider[current].classList.toggle('display');   
39    };
40
41    };
42  
43
44/*------slider2の記述 --------*/
45
46var currentt = 0;
47var slider2 = document.getElementById('slider2').getElementsByTagName( 'div' );
48
49window.onload = function start2() {
50    var time2 = setInterval("changeImage2(1)",5000); /*スライド時間コントロール②*/
51
52    document.getElementById('prev2').onclick = function() {
53            changeImage2(-1);
54            clearInterval(time2);
55            time2 = setInterval("changeImage2(1)",5000); /*スライド時間コントロール②*/
56        };
57        document.getElementById('next2').onclick = function() {
58            changeImage2(1);
59            clearInterval(time2);
60            time2 = setInterval("changeImage2(1)",5000); /*スライド時間コントロール②*/
61        };
62};
63
64var changeImage2 = function(num2) {
65    for(var i = 0; i < slider2.length; i++){
66    slider2[i].classList.remove('display');
67    }
68
69if(currentt + num2 >= 0 && currentt + num2 < slider2.length) {
70    currentt += num2; 
71    tog_display2();   
72}else if (currentt + num2 >= slider2.length){
73    currentt = 0; 
74    tog_display2(); 
75}else if (currentt + num2 < 0){
76    currentt = slider2.length -1 ; 
77    tog_display2(); 
78}
79
80function tog_display2(){
81    slider2[currentt].classList.toggle('display');   
82};
83
84};
85

css
1.slider-box{position: relative;}/* ボタンを画像上からの位置でposition取らすため設置*/
2#slider{
3    position: relative;
4    height: 38em;
5    background-color: antiquewhite;
6    margin:  0 auto;
7    width: 100%;
8    overflow: hidden;
9}
10#slider2{
11    position: relative;
12    height: 38em;
13    background-color: antiquewhite;
14    margin:  0 auto;
15    width: 100%;
16    overflow: hidden;
17}
18
19.slide{
20    /*---中央よせ----*/
21    margin:0 auto;
22    height: 38em;
23    position: absolute;
24    width: 100%;
25    opacity: 0;  /* safariではopacityは％だと機能しないので０〜１でかく*/
26    -webkit-transition: all 1s;
27    -moz-transition: all 1s;
28    -ms-transition: all 1s;
29    -o-transition: all 1s;
30    transition: all 2s;
31}
32
33
34.slide img{
35    /*---中央よせ----*/
36    position: absolute;
37    top: 0;
38    left: 0;
39    right: 0;
40    bottom: 0;
41    margin: auto;   
42    width: 100%;
43    user-select: none; /* CSS3 */
44    -moz-user-select: none; /* Firefox */
45    -webkit-user-select: none; /* Safari、Chromeなど */
46    -ms-user-select: none; /* IE10から */
47}
48.display{opacity: 1;}
49.slide-button{display: inline-block;}
50
51.arrow_w{width: 5em;}
52.prev{
53    position: absolute;
54    top: 18em;
55    z-index: 1000;
56}
57.next{
58    position: absolute;
59    top: 15em;
60    right: 0;
61    z-index: 1000;
62}