I need some help and I cannot find the answer on here, I have 2 selectable lists, the first list shows Ace, King, Queen all the way to 2, the second one also lists each card but also each card and the word suited. I would like that if lets say King is selected on first list then King Suited is not selected on the second list and then if user changes to Queen then Queen Suited would not be selectable. Any help?

Here is how my lists are defined:
this.firstCard = [
//{label:$L('Away'), value:"away", secondaryIcon:'status-away'},
{label:$L('Ace'), value:"A"},
{label:$L('King'), value:"K"},
{label:$L('Queen'), value:"Q"},
{label:$L('Jack'), value:"J"},
{label:$L('10'), value:"T"},
{label:$L('9'), value:"9"},
{label:$L('8'), value:"8"},
{label:$L('7'), value:"7"},
{label:$L('6'), value:"6"},
{label:$L('5'), value:"5"},
{label:$L('4'), value:"4"},
{label:$L('3'), value:"3"},
{label:$L('2'), value:"2"} ]

this.secondCard= [
//{label:$L('Away'), value:"away", secondaryIcon:'status-away'},
{label:$L('Ace'), value:"A", visiblilty:false},
{label:$L('Ace Suited'), value:"As"},
{label:$L('King'), value:"K"},
{label:$L('King Suited'), value:"Ks"},
{label:$L('Queen'), value:"Q"},
{label:$L('Queen Suited'), value:"Qs"},
{label:$L('Jack'), value:"J"},
{label:$L('Jack Suited'), value:"JsJsJs&$quot$;},
{label:$L('10'), value:"T"},
{label:$L('10 Suited'), value:"Ts"},
{label:$L('9'), value:"9"},
{label:$L('9 Suited'), value:"9s"},
{label:$L('8 '), value:"8"},
{label:$L('8 Suited'), value:"8s"},
{label:$L('7 '), value:"7"},
{label:$L('7 Suited'), value:"7s"},
{label:$L('6'), value:"6"},
{label:$L('6 Suited'), value:"6s"},
{label:$L('5'), value:"5"},
{label:$L('5 Suited'), value:"5s"},
{label:$L('4'), value:"4"},
{label:$L('4 Suited'), value:"4s"},
{label:$L('3'), value:"3"},
{label:$L('3 Suited'), value:"3s"},
{label:$L('2'), value:"2"},
{label:$L('2 Suited'), value:"2s"} ]

Thank you.