Need some help in searching a text from page in jquery? -

i searching text page. function working fine problem on clicking search button search first .but when user click again search button should go next search not going. on clicking next going next.i need same functionality on next , search button. here fiddle

http://jsfiddle.net/ravi1989/wjlmx/28/

function searchandhighlight(searchterm, selector) {     if (searchterm) {         var searchtermregex, matches, selector = selector || "#realtimecontents";         try {             searchtermregex = new regexp('('+searchterm+')', "ig");         } catch (e) {             return false;         }         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 = 0;                 $('.searchbuttonclicktext_h').off('click').on('click', function () {                 i++;                 alert("oo")                 if (i >= $('.match').length) = 0;                  $('.match').removeclass('highlighted');                 $('.match').eq(i).addclass('highlighted');                 $('.ui-mobile-viewport').animate({                     scrolltop: $('.match').eq(i).offset().top                 }, 300);             });              $('.next_h').off('click').on('click', function () {                 i++;                  if (i >= $('.match').length) = 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) = $('.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 first 1 appears                 $(window).scrolltop($('.highlighted:first').position().top);             }             return true;         }     }     return false; }   $(document).on('click', '.searchbuttonclicktext_h', function (event) {      $(".highlighted").removeclass("highlighted").removeclass("match");     if (!searchandhighlight($('.textsearchvalue_h').val())) {         alert("no results found");     }   }); 

i need user go next when user click search button going in next button ?

demo , autosearch demo

here code -

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();       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 = $(selector).text().match(searchtermregex);         if (matches !==null && matches.length > 0) {             var txt = $(selector).text().replace(searchtermregex, '<span class="match">$1</span>');             $(selector).html(txt);             searchindex++;             $('.match:first').addclass('highlighted');             $(document).scrolltop($('.match').eq(searchindex).offset().top);              return true;         }         return false;     }     return false; }  function searchnext(){   searchindex++;   if (searchindex >= $('.match').length) searchindex = 0;   $('.highlighted').removeclass('highlighted');   $('.match').eq(searchindex).addclass('highlighted');   $(document).scrolltop($('.match').eq(searchindex).offset().top); }  function searchprev(){   searchindex--;   if (searchindex < 0) searchindex = $('.match').length - 1;   $('.highlighted').removeclass('highlighted');   $('.match').eq(searchindex).addclass('highlighted');   $(document).scrolltop($('.match').eq(searchindex).offset().top); }