JSFiddle - React, Tailwind, and code Playground

HTML

<div class="searchContend_h">
    <div class="ui-grid-c">
        <div class="ui-block-a">
            <input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
        </div>
        <div class="ui-block-b"> <a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h">Search</a>

        </div>
        <div class="ui-block-c"> <a href="#" data-role="button" data-corners="false" data-inline="true" class="next_h">Next</a>

        </div>
        <div class="ui-block-d"> <a href="#" data-role="button" data-corners="false" data-inline="true" class="previous_h">Previous</a>

        </div>
        <div id="realTimeContents">naveendfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkj&kdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds kfskdnaveen jfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k naveen</div>
    </div>
</div>

CSS

.highlighted {
     background-color:yellow;
 }
 .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 */
 }
 .highlight {
     padding:1px 4px;
     margin:0 -4px;
 }

JavaScript

function searchAndHighlight(searchTerm, selector) {
    if (searchTerm) {
        var selector = selector || "#realTimeContents";
        var searchTermRegEx = new RegExp('('+searchTerm+')', "ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if (matches != null && matches.length > 0) {
            $('.highlighted').removeClass('highlighted');

            $span = $('#realTimeContents span');
            $span.replaceWith($span.html());
            
            var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>');
            
            $(selector).html(txt);
            
            $('.match:first').addClass('highlighted');

            var i = 0;

            $('.next_h').off('click').on('click', function () {
                i++;

                if (i >= $('.match').length) i = 0;

                $('.match').removeClass('highlighted');
                $('.match').eq(i).addClass('highlighted');
                $('.ui-mobile-viewport').animate({
                    scrollTop: $('.match').eq(i).offset().top
                }, 300);
            });
            $('.previous_h').off('click').on('click', function () {

                i--;

                if (i < 0) i = $('.match').length - 1;

                $('.match').removeClass('highlighted');
                $('.match').eq(i).addClass('highlighted');
                $('.ui-mobile-viewport').animate({
                    scrollTop: $('.match').eq(i).offset().top
                }, 300);
            });




            if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}

$(document).on('click', '.searchButtonClickText_h', function (event) {

    $(".highlighted").removeClass("highlighted").removeClass("match");
    if...