Selecting and deselecting rows for color border in jquery , css

I new to Jquery Mobile and Css so have little problem . Any one give me suggetions regarding this work.

Match the following : 

i have two columns :

    Left column          -    Right column
----------------------------------------------
    abc                       ABC
    def                       DEF 
    ghi                       GHI
    jkl                       JKL

When user click left column first (eg: abc) it change to color such as yellow border and then user clicking right column it changes as same color (yellow border).

I have done this using the session storage : This is my below code :

        $('#tableone').on('click','.tabb',function(event){
            var id = $(this).attr("id");
            wto = window.sessionStorage.getItem(window.tempvarone);
            if(wto == id){
            $("#"+id).css("border", "3px solid white" );
            bbbbbb = $('#'+id).text();
            var gd = 5;
            incren--;
            window.sessionStorage.setItem(window.tempvarone, gd);
            doItfun();
            }
            else{
            window.sessionStorage.setItem(window.tempvarone, id);
            var iddd=$(this).attr('id');
            var bbc = window.sessionStorage.setItem("name", iddd);
            valone = $('#'+iddd).text();
            qwertyk = $(this).attr('id');
    switch (qwertyk){
        case "0":
        $("#"+qwertyk).css( "border", "3px solid yellow" );
            doIt(); 
        incren++;       
        window.sessionStorage.setItem("zero", "0");
         break;
         case "1":   
          $("#"+qwertyk).css( "border", "3px solid blue" );
          doIt();
          incren++;     
          window.sessionStorage.setItem("one", "1");
          break;
          case "2":
         $("#"+qwertyk).css( "border", "3px solid   #C0C0C0" );
            doIt();
            incren++;       
         window.sessionStorage.setItem("two", "2");
          break;
           case "3":
         $("#"+qwertyk).css( "border","3px solid violet" );
            doIt();
            incren++;       
         window.sessionStorage.setItem("three", "3");
          break;
          default:
          alert("hello"+qwertyk);
          break;
        }
            }
            one();
            });



$('#tabletwo').on('click','.tot',function(event){

 var id12 = $(this).attr("id");
 var wtot = window.sessionStorage.getItem(window.tempvartwo);

if(wtot == id12){
    $("#"+id12).css("border", "3px solid white" );
        bbbbbb = $('#'+id12).text();
var gd = 5;
window.sessionStorage.setItem(window.tempvartwo, gd);
doItfun1();
}
else{
    window.sessionStorage.setItem(window.tempvartwo, id12);
 //   alert($('#'+id12).text()); // text value
    valtwo = $('#'+id12).text();
//  alert($(this).attr('id')); // ID value

    var abc = window.sessionStorage.getItem("name");
    switch (abc){
    case "0":
    $("#"+id12).css( "border", "3px solid yellow" );
    doIt2();

    break;
    case "1":   
    $("#"+id12).css( "border", "3px solid blue" );
    doIt2();

    break;
    case "2":
    $("#"+id12).css( "border", "3px solid #C0C0C0" );
    doIt2();

    break;
    case "3":
    $("#"+id12).css( "border","3px solid violet" );
    doIt2();

    break;
    }
    var a = 0;
    var codetwo = new Array();
    var codeone = new Array();
    codeone[0]=window.sessionStorage.getItem("zero");
    codeone[1]=window.sessionStorage.getItem("one");
    codeone[2]=window.sessionStorage.getItem("two");
    codeone[3]=window.sessionStorage.getItem("three");
    for(i=0;i<4;i++)
    {
    codetwo[i]=a;
    a++;
    }
if(incren == 3){
    for(var u=0;u<4;u++){

    if(codeone[u]==codetwo[u]){
    //  alert(codetwo[u]+""+codeone[u]);
    }else{
        qwertyk = u;
        alert(qwertyk+"::::::");
    //  funcswitchone();
        funcswitchtwo();
    }
    }
}
}
two();
});

This above code working fine . But the problem is when User click any other row in table two then it calls same last selected color like

first click on first table row one has yellow color and then clicking table two it makes yellow row . if user click other row it also makes yellow color border . How can i stop that?

Only one color could be select and deselect...
and other doubt if user abc row (table one) selected and ABC row (table two) selected and then if i select def row(table one) and then ABC(table two) row it should make change in abc row (table one) as normal white border .. How can i do that using CSS. Note frds I m very new to web development CSS.
Sorry for bad english.