Question with logic to select div

Question

I have the following problem, when I click on a div the same should be with the background-color black and the color of the color that really is the background, until then it is working normally, but only when you click on a div only once, in the second click the div that is clicked does not lose the opacity, there would be some way to resolve this:

$(function() {
  $('.grade:eq(1)').on('click', () => {
     $('.grade:eq(1)').css({
        'background-color': '#000',
        'color': '#EC0080',
        'filter': 'opacity(1)' 
     }) 
     $('.grade:eq(0)').css({
        'background-color': '#009ADE',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(0)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(0)').css('filter','opacity(0.4)')
     })
     $('.grade:eq(2)').css({
        'background-color': '#FFEA00',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(2)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(2)').css('filter','opacity(0.4)')
     })
  })
  
  $('.grade:eq(2)').on('click', () => {
     $('.grade:eq(2)').css({
        'background-color': '#000',
        'color': '#FFEA00',
        'filter': 'opacity(1)'
     })
     $('.grade:eq(1)').css({
        'background-color': '#EC0080',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(1)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(1)').css('filter','opacity(0.4)')
     })
     $('.grade:eq(0)').css({
        'background-color': '#009ADE',
        'color': '#FFF',
    	'filter': 'opacity(0.4)'
     }).mouseenter(() => {
        $('.grade:eq(0)').css('filter','opacity(1)')
     }).mouseleave(() => {
        $('.grade:eq(0)').css('filter','opacity(0.4)')
     })
  })
  
  $('.grade:eq(0)').on('click', () => {
     $('.grade:eq(0)').css({
        'background-color': '#000',
        'color': '#009ADE',
        'filter': 'opacity(1)' 
     })
	$('.grade:eq(1)').css({
        'background-color': '#EC0080',
        'color': '#FFF',
        'filter': 'opacity(0.4)'
    }).mouseenter(() => {
        $('.grade:eq(1)').css('filter','opacity(1)')
    }).mouseleave(() => {
        $('.grade:eq(1)').css('filter','opacity(0.4)')
    })
    $('.grade:eq(2)').css({
        'background-color': '#FFEA00',
        'color': '#FFF',
        'filter': 'opacity(0.4)'
    }).mouseenter(() => {
        $('.grade:eq(2)').css('filter','opacity(1)')
    }).mouseleave(() => {
        $('.grade:eq(2)').css('filter','opacity(0.4)')
    })

  }) 
})

.grades {
    width: 350px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
}
.grade {
    width: 100px;
    height: 100px;
    margin: 5px;
    color: #FFF;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
.grade:nth-child(3n+1) {
    background-color: #009ADE;
    filter: opacity(0.4);
}
.grade:nth-child(3n+2) {
    background-color: #EC0080;
    filter: opacity(0.4);
}
.grade:nth-child(3n+3) {
    background-color: #FFEA00;
    filter: opacity(0.4);
}
.grade:nth-child(3n+1):hover {
    filter: opacity(1);
}
.grade:nth-child(3n+2):hover {
    filter: opacity(1);
}
.grade:nth-child(3n+3):hover {
    filter: opacity(1);
}
.grade:nth-last-child(2) {
    background-color: #000;
    color: #EC0080;
    filter: opacity(1);
}

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

<div class="grades">
   <div class="grade">21h</div>
   <div class="grade">22h</div>
   <div class="grade" id="escolhido">23h</div>
</div>

Answer 1

Hello Leandrade everything right? To do the selected work I thought it best to include a ". chosen" class that contains all the css, then by clicking on a ". grid" removed all classes ". chosen"

$('.grade').removeClass('escolhido')

So I include only that clicked grid

$(this).addClass('escolhido')

When the problem was giving in its code, the reason was because of the events of mouseenter and mouseleave hope I’ve helped

$(function() {
  $('.grade').on('click', function() {
    $('.grade').removeClass('escolhido')
    $(this).addClass('escolhido')
  })
})

.grades {
    width: 350px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
}
.grade {
    width: 100px;
    height: 100px;
    margin: 5px;
    color: #FFF;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
.grade:not(.escolhido) {
    filter: opacity(0.4);
}
.grade:nth-child(3n+1) {
    background-color: #009ADE;
}
.grade:nth-child(3n+2) {
    background-color: #EC0080;
}
.grade:nth-child(3n+3) {
    background-color: #FFEA00;
}
.grade:hover {
    filter: opacity(1);
}
.grade:nth-child(3n+1).escolhido {
    color: #009ADE;
}
.grade:nth-child(3n+2).escolhido {
    color: #EC0080;
}
.grade:nth-child(3n+3).escolhido {
    color: #FFEA00;
}
.grades .escolhido {
    background-color: #000;
    filter: opacity(1);
}

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

<div class="grades">
   <div class="grade">21h</div>
   <div class="grade">22h</div>
   <div class="grade escolhido">23h</div>
</div>