I have a slide function that slides between two images, and show the before and after, the issue is that the looped out divs containing the images doenst slide with the range inpt that controls the sl

I have a slide function that slides between two images, and show the before and after, the issue is that the looped out divs containing the images doenst slide with the range input that controls the motion between the two images.

document.querySelector(".slider input").addEventListener("input", function(){
  document.querySelector(".original-image").style.width = this.value + "%";
});
 
document.querySelector(".before input").addEventListener("input", function(){
  document.querySelector(".after").style.width = this.value + "%";
});

Select allOpen in new window

// img name container
let key = [];
const response = { imgOne: [key], imgTwo: [key]};


// php response data container 
let conData = [];


// creates dynamic div/ slider
function slider(valueOne, valueTwo){    
    let objSli = `<div class="slider" class="before" style="background-image: url('/blog-app/img/compare/${valueOne}')">
    <div class="original-image" class="after" style="background-image: url('/blog-app/img/compare/${valueTwo}')">
        </div>
    <input type="range" value="50" max="100">
</div>
<br>`;
return objSli;
};




function pushImgName(i){
    response.imgOne[i] = new Array();
    response.imgTwo[i] = new Array();
    response.imgOne[i] += conData[i]["imgName1"];
    response.imgTwo[i] += conData[i]["imgName2"];
}
   
$.ajax({
    url: '/blog-app/includes/compare_thumbnails.incl.php',
    type: 'POST',
    success: function(data) {
            //parse out the data in JSON form
            console.log(data, typeof data);
            // console.log(data);
            conData = JSON.parse(data);
            if (!data.error){
                for (let i = 0; i < conData.length; i++){
                pushImgName(i);   
                }
            //show var response
            console.log(response);       
            }
            $.get("/blog-app/includes/compare_thumbnails.incl.php", {img: response}, function(base64) {
                const respObj = Array(response);    
                respObj.forEach(element => {
                    for (let i = 0; i < element["imgOne"].length; i++){
                        $("#result").append(slider(element["imgOne"][i], element["imgTwo"][i])); 
                    }
                });
             });
    }
});

Select allOpen in new window

body{
  margin: 0;
  padding: 0;
}


.slider{
  width: 420px;
  height: 350px;
  display: flex;
  background: url("https://www.nielsenhaarkliniek.nl/wp-content/uploads/2019/10/Karel-Del-casteleto-Na.jpeg") no-repeat;
  background-position: 0 15%;
  background-size: 40vw;
  position: relative;
  object-fit: center;
}


.slider input{
  -webkit-appearance: none;
  width: 100%;
  background: none;
  z-index: 10;
}


.slider input::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 10px;
  height: 350px;
  background-color: #111;
  cursor: pointer;
}


.original-image{
  position: absolute;
  left: 0;
  width: 50%;
  height: 350px;
  background: url("https://www.nielsenhaarkliniek.nl/wp-content/uploads/2019/10/Karel-Del-casteleto-Voor.jpeg") no-repeat;
  background-position: 0 15%;
  background-size: 40vw;
  object-fit: center;
}

Select allOpen in new window

This one is static and works fine



These ones are dynamic and the slide function doesnt work at all