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><img src="img/Follow-Realtime.png" class="follow_h"id=""/></a>
 <a><img src="img/Stop-Realtime.png" id="" class="stop_h"/></a>
 <a><img src="img/Email-Document.png" id="" class="email_h"/></a>
 <a><img src="img/search.png" id="" class="search_h" /></a>
 <a><img src="img/zoom-in.png" id="" class ="zoomIn_h"/></a>
 <a><img src="img/Export-Realtime.png" id="" class="exportRealTime_h"/></a>

        </div>
    </div>
    <div class="ui-grid-c" id="searchbar" class="searchContend_h">
        <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">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">hi test
        <br/>test
        <br/>test
        <br/>test
        <br/>
    </div>
</div>

CSS

.ui-page.ui-body-c.ui-page-active {
    height: 100%;
}
#realTimeContents {
    max-height: 100%;
    position: relative;
    overflow-y: auto!important;
}
#searchbar .ui-btn {
    width: 8em;
}
#searchbar .ui-input-text {
    display: inline-block;
}
#searchbar {
    background: #333;
    width: 100%;
}
.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 {
    ...