How can you process a large number of css classes, for example in a loop, in JS?

Question

Data processing

There are n-number of blocks with progress bars on the page.
Each strip has its own css class of the format pr_1, pr_2, pr_3, etc., containing the width value as a percentage.
The task is to display the css value as a percentage on the strip.
I solved the problem with the following code:
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)
    });

Now there are more than 30 such progress bars, and it’s not right to write a JS function for each bar.
Please help a newbie in JS make some kind of loop to automate all this somehow, if of course it’s possible...
Link for example: https://codepen.io/anon/pen/qVBXjv

Answer 1

well, I came to the solution of the problem myself:
https://codepen.io/anon/pen/qVBXjv