JSFiddle - React, Tailwind, and code Playground

HTML

<label>
                    <img class="jogo" data-game="lol" src="../cdn/img/jogos/lol.png">
                    <img class="jogo" data-game="csgo" src="../cdn/img/jogos/csgo.png">
            </label>
            <br> 
            <label>
                <div class="div-lol">
                  <div>
                    Team 1  
                    <select>
                        <option> Lista Opçoes </option>
                    </select> 
                    </div>            
                
                <div>
                   Team 2  
                    <select>
                        <option> Lista Opçoes </option>
                    </select>               
                </div>
             </div>
                <div class="div-csgo">
                  <div>
                    Team 1  
                    <select>
                        <option> Lista Opçoes </option>
                    </select> 
                    </div>            
                
                <div>
                   Team 2  
                    <select>
                        <option> Lista opçoes </option>
                    </select>             
                </div>
             </div>
            </label>

CSS

.jogo{
		opacity: 0.5;
	}
.div-lol{
		display: none;
	}

	.div-csgo{
		display: none;
	}

JavaScript

$(function(){

    $(".jogo").click(function(){
 
        $(".jogo").not(this).animate({opacity:0.5},{duration:100});
        $(this).animate({opacity:1},{duration:100});
        var jogo = $(this).data("game");

        if(jogo == "lol"){
            $(".div-lol").css("display","block");
        }else if(jogo == "csgo"){
            $(".div-csgo").css("display","block");            
        }
    });

});