JSFiddle - React, Tailwind, and code Playground

by jsfiddle_one

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Problem nested list views</h1>
    </div>
    <div data-role="content">   
        <div class="content-primary">	
            <ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
                <li data-role="list-divider" id="dpw" >
                  
                        DPW
                </li>
                
                <li><a href="#" class="dpw">Inbox</a></li>
                <li><a href="#" class="dpw">Outbox</a></li>
                
                   <li data-role="list-divider" id="custo">
                  
                        Customs
                </li>
                
                <li><a href="#" class="custo">Friends</a></li>
                <li><a href="#" class="custo">Work</a></li>
            </ul>
        </div>
</div>
</div>

JavaScript

var hide=0;
   var dpwClone='';
    $(function(){
      $('[data-role="list-divider"]').click(function(element){
          $(this).nextUntil('[data-role="list-divider"]').toggle();
          $("#eServiceList").listview("refresh");
//      $(this).nextUntil('[data-role="list-divider"]').toggle();
    });
    
    $( "#eServiceList" ).listview( "option", "filterCallback", searchList);
    
    function searchList( text, searchValue, item ) {
           var result = text.toString().toLowerCase().indexOf( searchValue.toString().toLowerCase() );
           var show = false;
           var hide = true;

        if (result == -1 )
           return hide;
        
        return show;   
    };
   });