Table row change color on lowest value

I'm using the distance matrix api from google to measure the distance between some places. The table fills automatically with data entered from a text box and search all the distances. I want to change the row color of the lowest number like this.

The table displays:

The color of 100km should change since its the lowest value of them all.

<?php
require_once '/var/www/vhosts/' . $_SERVER['HTTP_HOST'] . '/httpdocs/logs_locales.php';
require_once '/var/www/vhosts/' . $_SERVER['HTTP_HOST'] . '/httpdocs/config/config.inc.php';
require_once '/var/www/vhosts/' . $_SERVER['HTTP_HOST'] . '/httpdocs/config/settings.inc.php';


$origin = $_GET['sucursales'];
$destination = $_GET['destino'];
$sucursales = array("31114 Chihuahua, Chih.","54090 Estado de México, Tlalnepantla","20263 Aguascalientes, Ags.","80150 Culiacán, Sinaloa","34160 Durango, Dgo.","44440 Guadalajara, Jal.","83190 Hermosillo, Son.","32658 Cd. Juárez, Chihuahua.","37227 León Gto","21290 Mexicali, B.C.","64820 Monterrey, Nuevo León","85080 Cd. Obregón, Sonora","72530 Puebla, Puebla","76120 Querétaro, Qro.","25307 Saltillo, Coah.","78396 San Luis Potosí, San Luis Potosí","22430 Tijuana, Baja California","27140 Torreón, Coah.","29065 Tuxtla Gutiérrez, Chiapas","91700 Veracruz, Veracruz.","98160 Zacatecas, Zacatecas");
$otras_s = array("MATRIZ CHIHUAHUA", "SUCURSAL TLALNEPANTLA", "SUCURSAL AGUASCALIENTES", "SUCURSAL CULIACÁN", "SUCURSAL DURANGO", "SUCURSAL GUADALAJARA", "SUCURSAL HERMOSILLO", "SUCURSAL JUÁREZ", "SUCURSAL LEÓN", "SUCURSAL MEXICALI", "SUCURSAL MONTERREY", "SUCURSAL OBREGÓN", "SUCURSAL PUEBLA", "SUCURSAL QUERÉTARO", "SUCURSAL SALTILLO", "SUCURSAL SAN LUIS POTOSÍ", "SUCURSAL TIJUANA", "SUCURSAL TORREÓN", "SUCURSAL TUXTLA GTZ. CHIAPAS", "SUCURSAL VERACRUZ", "SUCURSAL ZACATECAS");
$cuentele = 0;
// $origin = $decodedT['sucursales'];
// $destination = $decodedT['destino'];
//print_r("destination ::: {$destination}");
echo "<div class='card'>";
echo "<div class='card-body'>";
echo "<div class='row'>";
echo "<div class='col-lg-12'>";
echo "<div class='table-responsive'>";        
echo "<table id='tablaDistancias' class='table table-bordered border-primary' style='width:100%'>";
echo "<thead class='text-center' style='background-color: #007bff;color: black'>";
echo "<tr>";
echo "<th>Sucursal</th>";
echo "<th>Origen</th>";
echo "<th>Destino</t>";
echo "<th>Distancia</th>";
echo "<th>Duracion</th>";                                
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach($sucursales as $origin){
    $distance_data = file_get_contents('https://maps.googleapis.com/maps/api/distancematrix/json?&origins='.urlencode($origin).'&destinations='.urlencode($destination).'&key=ZZZ');
    $distance_arr = json_decode($distance_data);
    if ($distance_arr->status=='OK') {
        $destination_addresses = $distance_arr->destination_addresses[0];
        $origin_addresses = $distance_arr->origin_addresses[0];
    } else {
        echo "<p>No es valido</p>";
        exit();
    }
    if ($origin_addresses=="" or $destination_addresses=="") {
        echo "<p>No se encontro Direccion</p>";
        exit();
    }
    $elements = $distance_arr->rows[0]->elements;
    $distance = $elements[0]->distance->text;
    $duration = $elements[0]->duration->text;
    echo "<tr>";
    echo "<td>"; 
    echo $otras_s[$cuentele]; 
    echo "</td>";
    echo "<td>"; 
    echo $origin_addresses; 
    echo "</td>";
    echo "<td>"; 
    echo $destination_addresses; 
    echo "</td>";
    echo "<td>"; 
    echo $distance; 
    echo "</td>";
    echo "<td>"; 
    echo $duration; 
    echo "</td>";
    echo "</tr>";                
    $cuentele++;
    
}
echo "</tbody>";        
echo "</table>";               
echo "</div>";
echo "</div>";
echo "</div>";  
echo "</div>";   
echo "</div>";


?>

This is what i tried so far:

 var table = document.getElementById("tablaDistancias"), minVal;
            
            for(var i = 1; i < table.rows.length; i++)
            {
                // if its the first row get the value
                if(i === 1){minVal = table.rows[i].cells[3].innerHTML; }

                // test with the other values
                else if(minVal > table.rows[i].cells[3].innerHTML)
                {
                    minVal = table.rows[i].cells[3].innerHTML;
                }
            }
            document.getElementById("val").innerHTML = " Minimum Value = "+minVal;
            console.log(maxVal);

Output: Minimum Value = 1,173 km

I get a value but its not the minimum, it seems it gets the minimum out of numbers with 4 digits, but if i have something as 230km as the lowest, it keeps getting the lowest of 4 digit numbers. Also have tried with parseFloat but it wont work like that.

I have a function that gets the data values that google distance matrix needs to measure the distances, then i create the table with the php code above so i cannot use Min or Max value of SQL.

Can you please help me with this?

Thanks in advance