Are you after something like this:
JSFiddle: http://jsfiddle.net/MvHTR/5/
$('#tblHospitals').find("tr:has(td.Chats)").each(function () {
var $li = $('#region3').append('<li></li>');
var $tds = $(this).find('td');
$li.append('<span class="countyHx">' + $tds.eq(0).html() + '</span>' + '<span style="width: 20%; background-color: yellow;">' + $tds.eq(1).html() + '</span>' + '<span style="width: 20%; background-color: red;">' + $tds.eq(2).html() + '</span>' + '<span style="width: 20%; background-color: green;">' + $tds.eq(3).html() + '</span>' + '<span style="width: 20%; background-color: orange;">' + $tds.eq(4).html() + '</span>' + '<span style="width: 20%; background-color: purple;">' + $tds.eq(4).html() + '</span>');
});
It looks like you want to find all rows that have tds with class=Chats, but then process each row and extract data from each TD manually. You were processing the child TDs instead (which makes it a bit harder than working with each row).
You were also appending the result to every preceding li using the selector $('#region3 li')
where you just wanted the specific LI you just added.
I used the JQuery syntax for getting the html, but you can use the raw DOM elements if you prefer.
If not please clarify the question.