JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-group">
    <li class="list-group-item" style="border:2px solid ;" data-distance="31.5">Test 31.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="21.5">Test 21.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="11.5">Test 11.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="51.5">Test 51.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="61.5">Test 61.5</li>
    <li class="list-group-item" style="border:2px solid ;" data-distance="11.5">Test 11.5</li>
</ul>

JavaScript

var low = $("[data-distance]").get().sort(function(a, b) 
{
    return a.getAttribute("data-distance") - b.getAttribute("data-distance");
})[0].getAttribute("data-distance");

$("[data-distance]").each(function(a){
    if (this.getAttribute("data-distance") == low) {
        $(this).css("border-color", "red");
    }
});