JQuery Mobile dynamic background color of 'li' - jquery-mobile

Question

Trying to set the background color of my dynamic li. li is not given 'class' or 'id' since each li needs to have an assigned color in code.
$(data).find("#HospitalDescriptions").find('th').filter(function(){
if (this.innerHTML !== '') {
var bgcolor = $( this ).css( "background-color" );
var txtcolor = $( this ).css( "color" );
if (bgcolor !== ''){
$('#information').append('<li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li>');
$('li').css({backgroundColor: bgcolor});
} else {
$('#information').append('<li>' + this.innerHTML + '</li>');
}
}
$('#information').listview('refresh'); // not working!
});
HTML:
<div data-role="page" data-theme="b" id="hospitals" data-add-back-btn="true">
<div data-role="header">
<h1>HOSP-HEADER</h1>
<a class="ui-btn-right" id="infoButton" onclick="$('#locations').listview('refresh');">Refresh</a>
</div><!-- /header -->
<div data-role="content" data-theme="b" id="regions">
<div data-role="content">
<h4>Information</h4>
<ul data-role="listview" data-inset="true" id="information">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Regions I, II, III</h4>
<ul data-role="listview" data-inset="true" id="region3">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region IV</h4>
<ul data-role="listview" data-inset="true" id="region4">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region V</h4>
<ul data-role="listview" data-inset="true" id="region5">
<!-- AJAX CONTENT -->
</ul>
</div>
</div>
<div data-role="footer">
<h1>Powered by CM</h1>
</div><!-- /footer -->
</div>
Results I'm getting now. text background color needs to fill the list view area not black:

Answer 1

1
▲
text-align: center; to li as well. Even simpler. – Omar yesterday