Change color of text of unselected div-CodePudding

I have 8 test divs. What I want is when I click on each of them I want to change their border color to red but after my 5th selection, I want all the unselected boxes to have their text colors change to blue. How can I achieve this? Currently, Only the first none selected div text is getting changed. Thanks in advance.

This is to hold space.....................................................

let testArray = []

$('.test').on('click', function() {
  if (testArray.length < 4) {
    testArray.push($(this).find('p').html())
    $(this).prop('id', 'selected')
  } else if (testArray.length == 4) {
    testArray.push($(this).find('p').html())
    $(this).prop('id', 'selected')
    console.log(testArray)
    //change all text color inside the test boxes that don't have red border
    $('#notSelected').each(function() {
      $(this).find('p').css('color', 'blue')
    });
  }
})

body {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.test {
  display: flex;
  width: 100px;
  height: 100px;
  border: 2px solid transparent;
  background-color: #000000;
  margin-left: 2%;
}

#selected {
  border: 2px solid red;
}

.test:hover {
  border: 2px solid green;
}

.test p {
  color: #ffffff;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div  id="notSelected">
  <p>test1</p>
</div>

<div  id="notSelected">
  <p>test2</p>
</div>

<div  id="notSelected">
  <p>test3</p>
</div>

<div  id="notSelected">
  <p>test4</p>
</div>

<div  id="notSelected">
  <p>test5</p>
</div>

<div  id="notSelected">
  <p>test6</p>
</div>

<div  id="notSelected">
  <p>test7</p>
</div>

<div  id="notSelected">
  <p>test8</p>
</div>

CodePudding user response：

Assuming your using .red and .blue classes with corresponding border color, then this should add the blue where there is no red:

$(".test:not(.red)").addClass("blue")