Tabbed Panel Listbox

I have a listbox, which works fine when I use

var myBtn = w.add ("button", undefined, "Apply");

function updateButtons(){ 

    // call this function whenever something changes in the ui that should prevent some buttons to be clickable 

    myBtn.enabled = (myList.selection !== null); 

    // and maybe some other buttons to update 

    } 

myList.onChange = function(){ 

    updateButtons(); 

    // and maybe something else 

    };

myBtn.onClick = function(){

var listSel = myList.selection;  

var myComp = app.project.activeItem;

if(!myComp || myComp.typeName !== "Composition") return;

var n;

for (n=0; n<listSel.length; n++){ 

var Text1 = "Text1";

var Text2 = listSel[n].t

ext;

This works fine.

But I want three separate listboxes, but rather than clutter the screen. I have tabbed then like so...

var tpanel = w.add('tabbedpanel');
tpanel.preferredSize = [350,300];


var top = tpanel.add('tab', undefined, "Tops");
top.add("listbox", [0,0,200,150], ["Jumper","T Shirt"], {
    alignment: ['top','left'],    multiline:true,    multiselect:true,    numberOfColumns:2,    showHeaders: true,    columnTitles: ['Tops','value']    });


var bottom = tpanel.add('tab', undefined, "Bottoms");
bottom.add("listbox", [0,0,200,150], ["Trousers","Shorts"], {
    alignment: ['top','left'],    multiline:true,    multiselect:true,    numberOfColumns:2,    showHeaders: true,    columnTitles: ['Bottoms','value']    });


var shoe = tpanel.add('tab', undefined, "Shoes");
shoe.add("listbox", [0,0,200,150], ["Sneakers","Ugg Boots"], {
    alignment: ['top','left'],    multiline:true,    multiselect:true,    numberOfColumns:2,    showHeaders: true,    columnTitles: ['Shoes','value']    });;

Inregards to this....var listSel = myList.selection;

I want to be able to change it on the lines of - var listSel = tpanel.shoes.selection

If someone knows the answer it would be much appreciated.