JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="realTimeScreen" >
     <a href="#" data-role="button" data-corners="false" data-inline="true" id="call"  class="" >call</a>
<div id="realTimeContents" class ="left realtimeContend_h" style="width:97%;"> 
     <span class="cursor" style="font-size:23px;">|</span>
</div>                       
</div>

CSS

#realTimeContents {
   overflow-y:auto;
  -webkit-overflow-scrolling: touch;
    height:50px
 
}

JavaScript

$(document).on('click', '#call', function(event) {
    
   
     setInterval(function(){
   $('#realTimeContents' ).prepend("kkkkkkkkkk"+'\n');
  
  },3000);
     setInterval(function(){
   
cursorAnimation();  
  },600);
});

   
function cursorAnimation() 
{
   // alert("yy")
  $(".cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}