JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contador"></div>
<label id="counter">0</label>
<div id="teste"></div>
<a class="meubotao" onclick="showDivcontador()">INICIAR TESTE</a>
<div class=testes>
  <div align="center" id="01">1. Pressione e solte o pedal
    <br /> de freio do
    <br /> estacionamento várias
    <br /> vezes para checar se a
    <br /> pressão diminuiu.</div>
  <div align="center" id="02">2. Pressione e solte o pedal de freio do estacionamento varias vezes para checar se a pressão diminui</div>
  <div align="center" id="03">3. Pressione e solte o pedal de freio do estacionamento varias vezes para checar se a pressão diminui</div>
</div>

<div class="footer">
  &copy; 2017 PokaYoke Team | Elaborado por Felipe Deolindo
</div>

CSS

body {
  background-color: #373435;
}

#teste {
  width: 1920px;
  height: 1080px;
  background-image: url('../images/background.jpg');
  background-repeat: no-repeat;
}

.footer {
  position: absolute;
  top: 1080px;
  left: 800px;
}

.testes div {
  display: none;
}

.testes {
  font: arial;
  color: white;
  font-size: 120px;
  position: absolute;
  top: 100px;
  left: 100px;
  align: center;
}

#counter {
  display: none;
  font-size: 120px;
  color: black;
}

#contador {
  width: 230px;
  height: 80px;
  background: white;
  position: absolute;
  top: 900px;
  left: 650px;
  border-left: 10px solid red;
  border-right: 10px solid red;
  border-bottom: 10px solid red;
  border-top: 10px solid red;
  display: none;
}

.meubotao {
  -moz-box-shadow: 0px 1px 0px 0px #000000;
  -webkit-box-shadow: 0px 1px 0px 0px #000000;
  box-shadow: 0px 1px 0px 0px #000000;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
  background: -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background: -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background: -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background: -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23', GradientType=0);
  background-color: #ffec64;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  border: 3px solid #000000;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: Georgia;
  font-size: 28px;
  font-weight: bold;
  padding: 20px 50px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffffff;
  position: absolute;
  top: 500px;
  left: 700px;
}

.meubotao:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
  background:...

JavaScript

var testCounter = 0;
$(document).ready(function () {
	
    var sensorValor = '';
    var testEnabled = false;
    var roundedValue = 0;
    var contaBotao = 0;
    setInterval(function () {
      sensorValor = $('#counter').text();
    }, 100);

    $(".meubotao").click(function(e){
      var len = $('.testes div').length;
      if (len > testCounter){
      	if(contaBotao > 0){
        	$('.testes div').eq(testCounter-1).hide();
        }
        contaBotao++;
        $('.testes div').eq(testCounter).show();
        testCounter++;
        if (len == testCounter){
          $('.meubotao').hide(); //ultima etapa ja chegou
        } else {
          $('.meubotao').html('Próxima Etapa');
          $('.meubotao').addClass('proxEtapa');
        }

      }
    });
      function showDivcontador(){
      document.getElementById("meubotao").style.display = 'block';
      }
});