Scroll trigger multi use

Question

I'm trying to provide a flex element animation that I can use multiple times. I can't use it multiple times because it triggers when the page is scrolling. How can I convert the closest element to a structure that I can select? My goal is to scroll the elements at different speeds with the transform feature while the page is scrolling.

$(window).scroll(function () {
    let dataDiv = $(".relaxable");
    let dataRl = parseInt(dataDiv.attr("dataRelaxing"));

    
    let scroll = parseInt($(window).scrollTop());
    let wHeight = parseInt($(window).height());
    let transformCalc = (scroll * 0.1) + ((wHeight/100) + dataRl);

    

    console.log(transformCalc);

});

body {
height:2500px;
}
.relaxable {
background:red;
width:30px;
height:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="relaxable" dataRelaxing="10" id="one">
</div>
<div class="relaxable" dataRelaxing="20" id="two">
</div>

In the above example I can get the values of the first div element.I can't take the value "20" in the second div element and act accordingly