for+if loop doing me some problems

iam getting a course name+ grade from an API , trying to build div for each course with grade next to him, this works for me but i tried to color each grade according to it value as u can see above 80 get class on css name goodGrade wich have "color: green", under 55 badGrade "color: red",and 55-80"medGrade: yellow". from some reason all my grade get class badGrade in addition to good or med grade. so right now even grade 98 is red.

for(let i=0 ; i<data.length; i++){
                 $(`.courses`).append(`
                 <div class="course"><b>${data[i].courseName}:</b> <span class="grade">${data[i].examMark}</span></div>
                 `) 

              if(data[i].examMark>55){
                if(data[i].examMark>80){
                    $(`.courses .grade`).addClass(`goodGrade`)
                }
                else{
                    $(`.courses .grade`).addClass(`medGrade`)
                }
              }
              else{
                $(`.courses .grade`).addClass(`badGrade`)
              }
            }