I am trying to build a dynamic image comparison slider that works with ACF repeater field. I used the html, css and js from this blog post: https://dev.to/shantanu_jana/image-comparison-slider-using-html-css-and-javascript-3cff

And it works as I need it, besides that it is not working with ACF repeater (or in general having multiple comparison sliders on one page, which is what I need)

I suppose it's because of the IDs that are needed for the JS, but I don't have enough experience to adjust the code to have it working. Can someone help? Or is it not possible?

HTML:

<div class="container">

  <img src="<?php echo get_field( 'slider_1' ); ?>">

  <img id="my-img" src="<?php echo get_field( 'slider_2' ); ?>">

  <input type="range" min="0" max="100" value="50" id="slider" oninput="slide()">

</div>

CSS:

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: grid;
    background: #d1ebec;
    place-items: center;
}


.container{
    height: 300px;
    width: 400px;
    position: relative;
    overflow: hidden;
    border: 5px solid #bfc0c1;
    box-shadow:-3px 5px 15px #000;

}

img{
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
}

#my-img{
    clip-path: polygon(0 0 , 50% 0, 50% 100%, 0 100%);
}


#slider{
    position: relative;
    -webkit-appearance: none;
    width: calc( 100% + 40px);
    height: 100%;
    margin-left: -20px;
    background-color: transparent;
    outline: none;
}
#slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 45px;
    width: 45px;
    background: url("slider-icon.svg"),
    rgba(255,255,255,0.3);
    border: 4px solid white;
    border-radius: 50%;
    background-size: contain;
    cursor: pointer;
}

JS:

function slide(){
    let slideValue = document.getElementById("slider").value;

    document.getElementById("my-img").style.clipPath = "polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)";

    console.log("polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)");
}