JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn" onclick="append();">Добавить элемент</div>
<div class="btn" onclick="change();">Поменять контент внутри</div>

<div style="height: 8px"></div>

<div id="wrapper">
  <div class="test"> 3 </div>
  <div class="test"> 7 </div>
  <div class="test"> 10 </div>
  <div class="test"> 23 </div>
  <div class="test"> 310</div>
  <div class="test"> 1 </div>
  <div class="test"> 9 </div>
  <div class="test"> 6 </div>
</div>





<!-- Для примера, чтобы контент генерировать -->

<script>
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function append() {
    let randomNumber = getRandomInt(4, 12);
    let div = document.createElement('div');
    div.className = "test";
    div.innerHTML = randomNumber;
    wrapper.append(div);
  }

  function change() {

    let elementsH = document.getElementsByClassName('test');

    for (var i = 0, length = elementsH.length; i < length; ++i) {
      let randomNumber = getRandomInt(4, 12);
      elementsH[i].innerHTML = randomNumber;
    }

  }

</script>

CSS

#wrapper {
  display: flex;
  flex-flow: row wrap;
}

.test {
  display: inline-block;
  background-color: #eee;
  text-align: center;
  width: 3em;
  height: 3em;
  line-height: 2.5em;
  margin-bottom: 10px;
  margin-right: 10px;
  position: relative;
}

.test:after {
  content: 'больше';
  font-size: .4em;
  position: absolute;
  bottom: 1.75em;
  width: 100%;
  left: 0;
  height: 1em;
  line-height: 1em;
}

.test--active {
  background: #ffe6ce;
}

.test--active:after {
  content: 'меньше';
}

.btn {
  display: inline-block;
  background: #333;
  color: #fff;
  border: 0;
  user-select: none;
  padding: .5em 1em;
  font-size: .75em;
  letter-spacing: .075em;
  line-height: 1em;
  cursor: pointer;
  position: sticky;
  top: 8px;
  z-index: 10;
}

.btn:hover {
  background: #888;
}

body {
  font-size: 24px;
  font-family: monospace;
}

JavaScript

// Выбираем элементы
var elements = document.getElementsByClassName('test');
const elementsWrapper = document.getElementById('wrapper');

// Поверка
function elementsValueCheck() {

  for (var i = 0, length = elements.length; i < length; ++i) {

    if (Number(elements[i].textContent) < 10) {
      elements[i].classList.add('test--active');
    } else {
      elements[i].classList.remove('test--active');
    }

  }

}

// Инициализируем проверку при загрузке
elementsValueCheck();


// Observer
//// Конфигурация observer
const observerConfig = {
  childList: true,
  subtree: true,
  characterData: true
};

//// Функция обратного вызова при срабатывании мутации
const observerCallback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      elementsValueCheck();
    } else if (mutation.type === 'subtree') {
      elementsValueCheck();
    } else if (mutation.type === 'characterData') {
      elementsValueCheck();
    }
  }
};

//// Создаем экземпляр наблюдателя с указанной функцией обратного вызова
const observer = new MutationObserver(observerCallback);

//// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(elementsWrapper, observerConfig);