jQuery addClass example

Change class name on click in jQuery

HTML

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>  
     <div class='match'>
        <div class='justify-center'>
            <p>Mia</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

CSS

.matches-container {
    display: flex;
    flex-direction: start;
}
.justify-center {
    align-items: center;
    padding: 10px;
}
.match div:nth-child(odd) {
  background-color: #d0d0d0;
}
.match div:nth-child(even) {
  background-color: #e4b2b2;
}
.match{
  justify-content: flex-start;
}