Как можно обрабатывать большое кол-во классов css, на-пример в цикле, на JS?

На странице имеется n-количество блоков с полосками прогресса.
Под каждую полоску прописан свой css класс формата pr_1, pr_2, pr_3 и т.д., содержащий значение width в процентах.
Задача - выводить на полоске значение css в процентах.

Задачу решил следующим кодом:

HTML:

<div class="pole">
  <div class="progress pr_1">
    <p class="p-01"></p>
  </div>
</div>

CSS:

.pr_1 {width: 22%} 
.pr_2 {width: 33%}

JS:

$(function pr_01 () {
        $('.pole').hide();
        var w1 = $('.pr_1').width();
        var w2 = $('.pr_1').css('width');
        var text = $('.p-01');
        $('.pole').show();
        text.text("ROI: " + w2)
    });
$(function pr_02 () {
        $('.pole').hide();
        var w1 = $('.pr_2').width();
        var w2 = $('.pr_2').css('width');
        var text = $('.p-02');
        $('.pole').show();
        text.text("ROI: " + w2)
    });

Сейчас таких полос прогресса более 30, и под каждую полоску писать функцию JS как то не правильно..
Помогите, пожалуйста, новичку в JS сделать какой-нибудь цикл, что-бы это все как то автоматизировать, если конечно это возможно...

Ссылка на пример: https://codepen.io/anon/pen/qVBXjv