JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-grid-c" id="searchbar" >
      
        <input name="text-12" id="text-12" value="" type="text" autocorrect="off" class="searchbox">     
    
    
        <a href="#" data-role="button" data-corners="false"  data-inline="true"  class="search">+</a>
    
    
        <a href="#" data-role="button" data-corners="false"  data-inline="true"  id="next" class="searchNext" disabled>Next</a>
    
    
        <a href="#" data-role="button" data-corners="false" data-inline="true" id="prev"  class="searchPrev" disabled>Previous</a>
    

</div>
            <div id="realTimeContents" class="realtimeContend_h" style="overflow-y: hidden">
                Sachin Ramesh Tendulkar AM (Listeni/səˈtʃɪn tɛnˈduːlkər/; born 24 April 1973)[1] is an Indian cricketer widely acknowledged as one of the greatest batsmen in One Day International cricket[2] and second only to Don Bradman in the all time greatest list in Test cricket.[3] In 2002, Wisden Cricketers' Almanack ranked him the second greatest Test batsman of all time, behind Don Bradman, and the second greatest one-day-international (ODI) batsman of all time, behind Viv Richards.[4] Tendulkar was a part of the 2011 Cricket World Cup winning Indian team in the later part of his career, his first such win in six World Cup appearances for India.[5] He was also the recipient of "Player of the Tournament" award of the 2003 Cricket World Cup held in South Africa.
Tendulkar won the 2010 Sir Garfield Sobers Trophy for cricketer of the year at the ICC awards.[6] He has been recommended for the receipt of the Bharat Ratna award, in fact it has been speculated that the criteria for the award of the Bharat Ratna were changed to allow him receive the award.[7][8] He is also a member of Rajya Sabha of Parliament of India.[9] Tendulkar passed 30,000 runs in international cricket on 20 November 2009. On 5 December 2012, Tendulkar became first batsman in history to cross the 34,000 run aggregate in all formats of the game put...

CSS

#searchbar .ui-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
text-align: center;
  margin-left: auto;
  margin-right: auto;
  line-height:20px; 
} 


#searchbar{
    position: fixed;
}

#searchbar + *{
    margin-top: 70px;
}

.highlighted {
     background-color:blue;
     padding:1px 2px;
     margin:0 -2px;
     border-radius: 5px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
 }
 .highlight {
     background-color: #fff34d;
     -moz-border-radius: 5px;
     /* FF1+ */
     -webkit-border-radius: 5px;
     /* Saf3-4 */
     border-radius: 5px;
     /* Opera 10.5, IE 9, Saf5, Chrome */
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
     /* FF3.5+ */
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
     /* Saf3.0+, Chrome */
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
     /* Opera 10.5+, IE 9.0 */
 }

JavaScript

var searchIndex = -1;
var searchTermOld ='';

$(document).ready(function(){
  $('.searchbox').on('change',function(){
    if($(this).val()===''){
      var  selector= "#realTimeContents";
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
    }
      searchIndex = -1;
      $('.searchNext').attr("disabled", "disabled");
      $('.searchPrev').attr("disabled", "disabled");
    searchTermOld = $(this).val();
  });
  $('.searchbox').on('keyup',function(){
    
    var  selector= "#realTimeContents";
    if($(this).val()===''){
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
    }
    if($(this).val() !== searchTermOld){
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
      searchIndex = -1;
      $('.searchNext').attr("disabled", "disabled");
      $('.searchPrev').attr("disabled", "disabled");                              
  }
  });
  $('.search').on('click',function(){

  
    if(searchIndex == -1){
      var searchTerm = $('.searchbox').val();
      if(searchTerm==''){
         alert("Please Insert Text.")
        return ;
      }
      searchAndHighlight(searchTerm);
    }
    else searchNext();
    if($('.match').length >1){
      $('.searchNext').removeAttr("disabled");
      $('.searchPrev').removeAttr("disabled");
    }
  });
  $('.searchNext').on('click',searchNext);
  
  $('.searchPrev').on('click',searchPrev);
});

function searchAndHighlight(searchTerm) {
    if (searchTerm) {
        var searchTermRegEx, matches;
        var  selector= "#realTimeContents";
        $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
        try {
            searchTermRegEx = new RegExp('('+searchTerm+')', "ig");
        } catch (e) {
            return false;
        }
        $('.highlighted').removeClass('highlighted');
        matches =...