JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div><span class="hello">Hjust a test </span></div>
trigger above text here: <input type="text" name="fname" id="input1">
<button class="world">trigger</button>
<br>

</body>
</html>

JavaScript

var setIntervalId = null;

function printNextChar(inputText){
	var currentInputLenth = $("#input1").val().length;
  
  if (currentInputLenth == inputText.length){
  	stopInterval();
  } else{
    updateInput(inputText);
  }  
}

function updateInput(inputText){
	var input1 = $("#input1");
  
  var currentInputLength = input1.val().length;
  var currentInputValue = input1.val();
  var nextChar = inputText[currentInputLength];
  
  input1.val(currentInputValue + nextChar);
}

function stopInterval(){
	clearInterval(setIntervalId);
}

$(".world").click(function(){
  var startText = $( ".hello" ).text();

  setIntervalId = setInterval(printNextChar, 1000, startText);
})