[smart-create]

Доброй ночи, уважаемые знатоки. Прошу помочь

Имею вот такую структуру DOM элементов:

<div class="container--filter">
	<span class="filter">Высота подачи:</span> 
	<span class="number_filter" data-for="Высота подачи">10</span>
	<span class="number_filter" data-for="Высота подачи">11</span>
	<span class="number_filter" data-for="Высота подачи">15</span>

	<span class="filter">Гарантия:</span> 
	<span class="number_filter" data-for="Гарантия">3</span>

	<span class="filter">Мощность:</span>
	<span class="number_filter" data-for="Мощность">120</span>
	<span class="number_filter" data-for="Мощность">370</span>
	<span class="number_filter" data-for="Мощность">90</span>

	<span class="filter">Производительность:</span>
	<span class="number_filter" data-for="Производительность">18</span>
	<span class="number_filter" data-for="Производительность">21</span>
	<span class="number_filter" data-for="Производительность">24</span> 
</div>

Мне нужно найти среди элементов ".number_filter" элементы с максимальным и минимальным значением .text(), а потом добавить к этим элементам какой либо класс, пусть будет ".test"

Получиться должно так:

<div class="container--filter">
	<span class="filter">Высота подачи:</span>
	<span class="number_filter test" data-for="Высота подачи">10</span> //минимальное значение
	<span class="number_filter" data-for="Высота подачи">11</span>
	<span class="number_filter test" data-for="Высота подачи">15</span> //максимальное значение

	<span class="filter">Гарантия:</span> 
	<span class="number_filter test" data-for="Гарантия">3</span> //минимальное и максимальное значение

	<span class="filter">Мощность:</span>
	<span class="number_filter" data-for="Мощность">120</span>
	<span class="number_filter test" data-for="Мощность">370</span> //максимальное значение
	<span class="number_filter test" data-for="Мощность">90</span> //минимальное значение

	<span class="filter">Производительность:</span>
	<span class="number_filter test" data-for="Производительность">18</span> //минимальное значение
	<span class="number_filter" data-for="Производительность">21</span>
	<span class="number_filter test" data-for="Производительность">24</span> //максимальное значение
</div>

Пытаюсь я это сделать следующим скриптом:

var arr_1 = new Array();
$('[data-for="'+$title+'"]').each(function(){ // начинаем гулять по элементам data-for="Высота подачи", ata-for="Производительность" и т.д.

	arr_1.push($(this).text()); //запихиваем в массив числовое значение которое содержит текущий элемент
	str = arr_1.join('.'); //преобразуем массив в строку с разделителем "."

	var $min = Math.min.apply( Math, str.match(/\d+/g)), //находим минимальное значение строки
	      $max = Math.max.apply( Math, str.match(/\d+/g)); //находим максимальное значение строки

	if ( ($(this).text() == $min) || ($(this).text() == $max) ){
		$(this).addClass('test'); // добавляем класс ".test" если значение текущего элемента равно максимальному или минимальному значению
	}
})

НО этот скрипт добавляет класс ".test" всем элементам в наборе, насколько я вижу из консоли из-за того что мое значение str не сразу принимает все значения $(this).text(), а по одному, то есть походу работы цикла each. То есть сначала затягивается только по одному значению для каждого [data-for="'+$title+'"], а класс ".test" в этот момент уже добавился, потому что раз уж значение одно то оно и минимально и максимальное сразу, ну и т.д. Пока each дойдет до конца и окончательно сформируется str, у меня уже все элементы имеют класс ".test".

Вопрос скорее всего заключается в том как мне получить str не по одному значению (по ходу цикла), а уже в конце цикла, то есть что бы в нем был полный набор значений? Тогда я смогу вытащить из него актуальное значение min и max

Или, если я изобрел какой то велосипед подскажите пожалуйста как сделать правильно