JSFiddle - React, Tailwind, and code Playground

HTML

<input id="recbutton" type="button" value="Recognize">
<div id="output">
  
  <div>
    Initial text
  </div>

</div>

CSS

#output {
  height: 80%;
  background-color: yellow;
}

JavaScript

var recognition = null;
var recognitionStarted = false;
var printcount = 1;
var lastPhrase = null;

$(function() {
  attachRecognition();
});

$('#recbutton').click( function() {
	if( !recognitionStarted ) {
    recognition.start();
  }
  else {
  	recognition.stop();
  }
});

function printOut(text) {
	var id = 'printcount' + printcount;
  printcount++;

	$('#output').append(
  	"<div id='" + printcount + "'>" + text + "</div>"
  );

	$("#output").animate({ scrollTop: $("#output").prop('scrollHeight')});
  
  return printcount;

}


function attachRecognition() {

  if (!('webkitSpeechRecognition' in window)) {
    
    $('button').prop('disabled', true);
    
    recognition = null;
    
  } else {
  	$('button').prop('disabled', false);
    
    recognition = new webkitSpeechRecognition();
    
    recognition.continuous = true;
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
    recognition.lang = "ru-RU";
    
    recognition.onstart = function(event) {
      recognitionStarted = true;
      printOut("speech recognition started");
    };
    
    recognition.onend = function(event) {
			recognitionStarted = false;
			printOut("speech recognition stopped");
    };
    
    recognition.onresult = function(event) {
      
      var finalPhrase = '';
      var interimPhrase = '';
      var result;
      var printcount;
      
      for(var i=0; i<event.results.length; ++i) {
        result = event.results[i];
        if( result.isFinal ) {
          finalPhrase = finalPhrase.trim() + ' ' + result[0].transcript;
        }
        else {
          interimPhrase = interimPhrase.trim() + ' ' + result[0].transcript;
        }
      }

      if( !lastPhrase ) {
      	printcount = printOut('');
        lastPhrase = $('#' + printcount);
      }
      
      lastPhrase.html(finalPhrase.trim() + ' ' + interimPhrase.trim());
      
      if( finalPhrase.trim() ) {
      	lastPhrase = null;
      }
      
      
    };
  }
}