scan values of certain class elements on page load and run a function to several elements with certain values only

I am trying to make an image censor function on page load.

1. scan values of certain class elements on page load
2. if several elements' value goes over 5
3. change img src for ones value count more than 5

I think I get how to scan and change after reading other questions in stackoverflow but I cannot change only specific ones.

from my understanding, below code will censor all images when scan a single 6

for example: HTML

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="naked_image.jpg"><p class="report-count">6</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

javascript

$(document).ready(function () {
   var count = $('.report-count').val();
   if (count > 5 ) { 
     $('.showing-image').attr('src', 'censored.jgp');
   }
});

Please help