JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test1">
<div data-foo="12">Div 1</div>
<div data-foo="43">Div 2</div>
<div data-foo="3">Div 3</div>
<div data-foo="143">Div 4</div>
<div data-foo="143">Div 5</div>
</div>


<div class="test" id="test2">
<div data-foo="0">Div 1</div>
<div data-foo="0">Div 2</div>

</div>

CSS

.yellow {
  background: yellow;
  }

.grey {
  background: grey;
  }

JavaScript

function minMaxId(selector) {
  var min = null,
    max = null;
  $(selector).each(function() {
    var id = parseInt($(this).data('foo'), 10);
    if ((min === null) || (id < min)) {
      min = id;
    }
    if ((max === null) || (id > max)) {
      max = id;
    }
  });
  return {
    min: min,
    max: max
  };
}

// Returns Obj with min and max
//minMaxId('.test div'); // => {min:1, max:5}


$('.test').each(function(){

// Change the highest one to have the class yellow
$(this).find($('[data-foo=' + minMaxId($(this).find('div')).max  + ']')).addClass('yellow')
});

// Change the lowest one to have the class grey
//$('[data-foo=' + minMaxId('.test div').min + ']').addClass('grey')