Four Separate SlideShows Working Individually On One Webpage – Inc. Next/Prev Buttons, and Slide Dots/Buttons Below

I'm looking to have four JavaScript-driven photo slideshows stacked under another on a single web page. I want to use this code off of the below W3 Schools JavaScript Slideshow web page and can not get slide dots on the bottom of the container to be individualized, nor the next and prev arrows to work within it's own containers/slideshows.

I want the first slide show seen on this page, but with four on the page, including active button/dot below: https://www.w3schools.com/howto/howto_js_slideshow.asp

Each slideshow needs to function separately including left (previous slide) and right (next slide) arrows, and slide dots/buttons below with active slide dot highlighted in a different color so viewer knows what slide they are on vs. the entire number of dots/slides in each slideshow . I want to use this code found on W3 schools slide show page and have it modified to work individually for each slideshow

• Inspect the code, identify and fix wthat’s causing any overlap,
• Adjust the JavaScript so each instance or slideshow runs independently,
• Ensure the fix works across browsers and on mobile devices

Hire with one day. Should be simple fix to add code for (dots1, dots2, and dots3) and looking to have work done within two days at most.