Apply 1 JS If statement to multiple HTML IDs

This is probably a really simple question and might have been answered before so I may just be phrasing it wrong when I’ve been searching for a solution.

I have a html grid where each <div> will change colour based on the value of a separate input <div>. I have this working so if < 2 - red, >= 3 & < 5 - orange, > 5 - green , but at the moment I am having to duplicate the JS if statement for each "box" I want to add. So the code below has four if statements with the only difference being the number at the end of the ids.

Link to Code Pen: Here

What would I need to change so that I can use one if statement and then in theory add an infinite number of boxes by adding another grid <div> and another input <div> with a different number on the end of the ID name?

<!--Grid--> 
<div class="KB-Grid">
  <div class="KB-item" id = "KB-1">PC15A </br> Hrs: </div>
  <div class="KB-item" id = "KB-2">PC15B </br> Hrs:</div>
  <div class="KB-item" id = "KB-3">PC16A </br> Hrs:</div>
  <div class="KB-item" id = "KB-4">PC16B </br> Hrs: </div>
</div>

<!--Inputs--> 
<div class = "KB-values">  
<div id = "KBV1"> 5</div>
<div id = "KBV2"> 5 </div>
<div id = "KBV3"> 5 </div>
<div id = "KBV4"> 5 </div>
</div>

var KBV1 = document.getElementById("KBV1").innerHTML;
        if (KBV1 >= 5) {
          document.getElementById("KB-1").style.backgroundColor = '#287d00';
        } else
        if (KBV1 >= 3 && KBV1 < 5) {
          document.getElementById("KB-1").style.backgroundColor = '#e0880b';
        } else
        if (KBV1 <= 2) {
          document.getElementById("KB-1").style.backgroundColor = '#ff0000';
        }


var KBV2 = document.getElementById("KBV2").innerHTML;
        if (KBV2 >= 5) {
          document.getElementById("KB-2").style.backgroundColor = '#287d00';
        } else
        if (KBV2 >= 3 && KBV2 < 5) {
          document.getElementById("KB-2").style.backgroundColor = '#e0880b';
        } else
        if (KBV2 <= 2) {
          document.getElementById("KB-2").style.backgroundColor = '#ff0000';
        }


var KBV3 = document.getElementById("KBV3").innerHTML;
        if (KBV3 >= 5) {
          document.getElementById("KB-3").style.backgroundColor = '#287d00';
        } else
        if (KBV3 >= 3 && KBV3 < 5) {
          document.getElementById("KB-3").style.backgroundColor = '#e0880b';
        } else
        if (KBV3 <= 2) {
          document.getElementById("KB-3").style.backgroundColor = '#ff0000';
        }



var KBV4 = document.getElementById("KBV4").innerHTML;
        if (KBV4 >= 5) {
          document.getElementById("KB-4").style.backgroundColor = '#287d00';
        } else
        if (KBV4 >= 3 && KBV4 < 5) {
          document.getElementById("KB-4").style.backgroundColor = '#e0880b';
        } else
        if (KBV4 <= 2) {
          document.getElementById("KB-4").style.backgroundColor = '#ff0000';
        }

CSS (not sure if this is need to awnser the question so left it at the bottom)

.KB-Grid {
    display: flex;
    flex-wrap: wrap;
  padding:20px;
}

.KB-item {
    height: 80px;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 33.3333%;
    flex-basis: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  border: 3px solid;
  font-size: 30px;
  text-align: center;
  font-family: Roboto, arial, san-serif;
}

.blank {
    height: 0;
}

.KB-values{
  visibility: hidden;
}