JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <span class="prev"></span>
  <span class="next"></span>
  <ul class="indicator">
    <li class="list1"></li> <!-- id を classに変更 -->
    <li class="list2"></li> <!-- id を classに変更 -->
    <li class="list3"></li> <!-- id を classに変更 -->
    <li class="list4"></li> <!-- id を classに変更 -->
  </ul>

  <div class="slider slider1">
    <div class="content content1">
      <p>content1</p>
    </div>
    <div class="content content2">
      <p>content2</p>
    </div>
    <div class="content content3">
      <p>content3</p>
    </div>
    <div class="content content4">
      <p>content4</p>
    </div>
  </div>
</div>

<div class="wrapper">
  <span class="prev"></span>
  <span class="next"></span>
  <ul class="indicator">
    <li class="list1"></li> <!-- id を classに変更 -->
    <li class="list2"></li> <!-- id を classに変更 -->
    <li class="list3"></li> <!-- id を classに変更 -->
    <li class="list4"></li> <!-- id を classに変更 -->
  </ul>

  <div class="slider slider1">
    <div class="content content1">
      <p>content1</p>
    </div>
    <div class="content content2">
      <p>content2</p>
    </div>
    <div class="content content3">
      <p>content3</p>
    </div>
    <div class="content content4">
      <p>content4</p>
    </div>
  </div>
</div>

<div class="wrapper">
  <span class="prev"></span>
  <span class="next"></span>
  <ul class="indicator">
    <li class="list1"></li> <!-- id を classに変更 -->
    <li class="list2"></li> <!-- id を classに変更 -->
    <li class="list3"></li> <!-- id を classに変更 -->
    <li class="list4"></li> <!-- id を classに変更 -->
  </ul>

  <div class="slider slider1">
    <div class="content content1">
      <p>content1</p>
    </div>
    <div class="content content2">
      <p>content2</p>
    </div>
    <div class="content content3">
      <p>content3</p>
    </div>
    <div class="content content4">
      <p>content4</p>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  max-width: 100vw;
  overflow: hidden;
  width: 100%;
  position: relative;
  height: 300px;
}

.wrapper:not(:first-child) {
  margin-top: 2em;
}

.next {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  bottom: 130px;
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.next::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 3px #828282;
  border-right: solid 3px #828282;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: 10px;
}

.next:hover {
  background-color: #fff;
  transition: all 0.3s;
}

.prev {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 130px;
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.prev::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 3px #828282;
  border-right: solid 3px #828282;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  left: 15px;
  top: 10px;
}

.prev:hover {
  background-color: #fff;
  transition: all 0.3s;
}

.slider {
  width: 400vw;
  display: flex;
  margin: 0 auto;
}

.slider1 {
  transform: translateX(0);
  transition: all 0.3s;
}

.slider2 {
  transform: translateX(-100vw);
  transition: all 0.3s;
}

.slider3 {
  transform: translateX(-200vw);
  transition: all 0.3s;
}

.slider4 {
  transform: translateX(-300vw);
  transition: all 0.3s;
}

.content {
  width: 100%;
  max-width: 100vw;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content1 {
  background-color: #ededed;
}

.content2 {
  background-color: #cfcfcf;
}

.content3 {
  background-color: #9c9c9c;
}

.content4 {
  background-color: #636363;
}

.indicator {
  width: 100%;
  position: absolute;
  bottom: 10px;
  display: flex;
  z-index: 10;
  justify-content: center;
  align-items: center;
}

li {
 ...

JavaScript

const prevBtns = document.querySelectorAll('.prev'); // 変更
const nextBtns = document.querySelectorAll('.next'); // 変更
const list1s = document.querySelectorAll('.list1'); // 変更
const list2s = document.querySelectorAll('.list2'); // 変更
const list3s = document.querySelectorAll('.list3'); // 変更
const list4s = document.querySelectorAll('.list4'); // 変更
// var slide = document.getElementById('slider'); // 削除


// クリックイベント
prevBtns.forEach(btn => btn.addEventListener('click', prevClick)); // 変更
nextBtns.forEach(btn => btn.addEventListener('click', nextClick)); // 変更


function nextClick(e) { // 引数追加
  const sliderWrapper = e.target.closest('.wrapper'); // 追加
  const slide = sliderWrapper.querySelector('.slider'); // 追加
  const list1 = sliderWrapper.querySelector('.list1'); // 追加
  const list2 = sliderWrapper.querySelector('.list2'); // 追加
  const list3 = sliderWrapper.querySelector('.list3'); // 追加
  const list4 = sliderWrapper.querySelector('.list4'); // 追加
  
  if (slide.classList.contains('slider1') === true) {
    slide.classList.remove('slider1');
    slide.classList.add('slider2');
    list1.style.backgroundColor = 'transparent';
    list2.style.backgroundColor = '#000';
    count = 0;
  } else if (slide.classList.contains('slider2') === true) {
    slide.classList.remove('slider2');
    slide.classList.add('slider3');
    list2.style.backgroundColor = 'transparent';
    list3.style.backgroundColor = '#000';
    count = 0;
  } else if (slide.classList.contains('slider3') === true) {
    slide.classList.remove('slider3');
    slide.classList.add('slider4');
    list3.style.backgroundColor = 'transparent';
    list4.style.backgroundColor = '#000';
    count = 0;
  } else {
    slide.classList.remove('slider4');
    slide.classList.add('slider1');
    list4.style.backgroundColor = 'transparent';
    list1.style.backgroundColor = '#000';
    count = 0;
  }
}

function prevClick(e) { // 引数追加
  const sliderWrapper = e.target.closest('.wrapper'); // 追加
  const slide =...