JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="realTimeScreen" > 
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">

        <h1 class="ui-title"  id="heading" style="text-align:left;margin-left: 20px;" ></h1>
        <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
            <a type="button" class="search_h"> click</a>
          
        </div>
        
        <div class="ui-grid-c" id="searchbar"  style="display: none;" class="searchContend_h" >
            <input name="text-12" id="text-12" value="" type="text" autocorrect="off" autocapitalize="off"  class="searchbox" > <a href="#" data-role="button" data-corners="false" data-inline="true" class="search">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>
         <div id="realTimeContents" class ="left realtimeContend_h" style="width:97%;">
                 "Two teachers attacked me and Rai after he had raised the issue of the association's constitution. Debate and dialogue has been replaced by violence, that too by teachers," said Shankar Kumar. 

"We decided not to attend as there was no point wasting time in a meeting that had no validity. Around 20 to 25 teachers were walking out when a teacher from the English department assaulted me. What is unfortunate is that this physical intimidation happened in the presence of so many teachers." 

Hindu College principal Pradyuman Kumar said: "I have received a complaint and it is unfortunate. We will examine the complaint as it happened inside the college staff room. This was not expected from teachers. They are role models for students and should care about the prestige of the institution." 

DCP (North)...

JavaScript

$(document).on('click', '.search_h', function() {

   $("#searchbar").toggle("slow");
});

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 + '...