JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="my_panel" data-role="listview" data-inset="true" data-inline='true'>
<li id='Lc_AAA_li' data-lang_id='AAA' data-theme='a'>
<a href='#'> A </a>
</li>
<li id='Lc_BBB_li' data-lang_id='BBB' data-theme='b'>
<a href='#'> B </a>
</li>
<li id='Lc_CCC_li' data-lang_id='CCC' data-theme='c'>
<a href='#'> C </a>
</li>
<li id='Lc_DDD_li' data-lang_id='DDD' data-theme='d'>
<a href='#'> D </a>
</li>
<li id='Lc_EEE_li' data-lang_id='EEE' data-theme='e'>
<a href='#'> E </a>
</li>
<li id='Lc_FFF_li' data-lang_id='FFF' data-theme='f'>
<a href='#'> F </a>
</li>
<li id='Lc_GGG_li' data-lang_id='GGG' data-theme='g'>
<a href='#'> G </a>
</li>
</ul>
JavaScript
function handle_onClick( argoj_element , args_language_id )
{
jQuery( "#my_panel li" )
.each( function( )
{ var lvb_active = ( jQuery( this ).attr( 'data-lang_id' ) == args_language_id ) ;
var lvs_theme_default = 'a' ;
var lvs_theme_active = 'e' ;
var lvs_theme = lvb_active ? lvs_theme_active : lvs_theme_default ;
var lvs_current_class = jQuery( this ).attr('class') ;
var lvs_removes = lvs_current_class.match(/ui-btn-up-\w+/gi ).join( " " ) ;
lvs_removes += " " ;
lvs_removes += (lvs_current_class.match(/ui-btn-hover-\w+/gi )||[]).join( " " ) ;
var lvs_adds = "ui-btn-up-" + lvs_theme ;
jQuery( this ).removeClass( lvs_removes )
.addClass ( lvs_adds )
.attr( 'data-theme' , lvs_theme ) ;
}) ;
}
jQuery('#my_panel li' )
.on( 'click' , function( argo_e )
{ var lvs_language_id = jQuery(this).attr('data-lang_id') ;
//alert( lvs_language_id ) ;
handle_onClick( jQuery(this) , lvs_language_id ) ;
//
}
) ;