JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html>
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1"> 
            <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
            <script src="http://code.jquery.com/jquery.js"></script>
            <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>    
    </head>
    <body>
        <div id="thelists" data-role="page">
        
            <div data-role="header">
                <a href="#" data-icon="back"  id="get" data-role="button" >get</a>
                    <h2>TestPage</h2>
                <a href="#" data-icon="home" id="change" data-role="button">change</a>
            </div><!-- /header -->       
            <div data-role="content">    
                <ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
            </div><!-- /content -->
        </div><!-- /page -->
    <script>
             
    </script>    
    </body>
    </html>

JavaScript

$('#get').click(function() {
            for (i=1; i<6; i++){
                $('#list').append('<li><a>list</a><a class="orig">items</a></li>');
            }
            $('#list').listview('refresh');
            //return false; 
        }); 
        $('#change').click(function() {
            console.log($('ul').attr('data-split-icon'));
            $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
            console.log($('ul').attr('data-split-icon'));
            $("[data-icon=gear]").each(function() {
                var $this = $(this);
                $this.attr('data-icon','info');
                $this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');                
            });
            $('#list').listview('refresh',true);
            return false; 
        });