Selecting multiple rows on a Tableview

I'm trying to create a TableView where I can select multiple rows. I have created the following code and it appears to work to an extent.

When I click on a row, the debug statement in the click event always reports '0' for any row regardless of how many times I click on it. First time I click on a row it turns red (#f00'), but if I click on it again it doesn't turn back to white.

I can see that it is not remembering the update to the 'selected' variable. What I'm trying to do is to allow the user to select multiple rows, by selecting an unselecting them. Are you able to help me identify what this is not working please?

Thanks

var data = [
  {title:'X small',   selected:0, backgroundColor:'#fff'},
  {title:'small',     selected:0, backgroundColor:'#fff'},
  {title:'medium',    selected:0, backgroundColor:'#fff'},
  {title:'large',     selected:0, backgroundColor:'#fff'},
  {title:'X large',   selected:0, backgroundColor:'#fff'},
  {title:'XX large',  selected:0, backgroundColor:'#fff'}
];
 
var tableView = Titanium.UI.createTableView({
  allowsSelection:true,
  data:data
});
 
tableView.addEventListener('click',function(e){
   Ti.API.debug(e.rowData.selected);
   e.rowData.selected = (e.rowData.selected ? 0 : 1);
   if(e.rowData.selected) {
      e.row.backgroundColor = '#f00';
   }
   else{
      e.row.backgroundColor = '#fff';
   }
});

Application type: Mobile
Titanium SDK version: 1.8.0 (01/06/12 16:01 a3a1da4)
Device: Android emulator - Google APIs 2.2 
Host Operating System: Windows XP
Titanium Studio, build: 1.0.7.201112281340