JSFiddle - React, Tailwind, and code Playground

HTML

Нажми на "Кнопка 1", затем, когда "Кнопка 2" станет активной, нажми и на неё
<div class="button">Кнопка 1</div>
<div class="nobutton">Кнопка 2</div>
<div class="text">Должен стать красным, после нажатия на "кнопка 2"</div>

CSS

.button {
  width: 140px;
  height: 50px;
  font:14px/50px arial;
  border:1px solid #333;
  text-align:center;
  cursor: pointer;
  margin: 15px;
}

.button:hover {
  background: #333;
  color:white;
}

.nobutton {
  width: 140px;
  height: 50px;
  font:14px/50px arial;
  border:1px solid #999;
  color:#999;
  text-align:center;
  margin: 15px;
  cursor: no-drop;
}

.red {
  color:red;
  font-weight: bold;
}

JavaScript

$(".button").click(function(){
$(".nobutton").addClass("button"); 
$(".nobutton").addClass("go"); 
$(".nobutton").removeClass("nobutton"); 
});

$("body").on("click", ".go",function(){
$(".text").addClass("red");  
});