toggleClass won't work in the for loop

this code will read a log and will toggleClass some buttons, through a for loop. I have put a few alerts and can see that it is working but at the end of the for loop, it will goes back to its original state again. I tried to do this with switchClass, show and hide but they work only for the first if and won't work for the rest of the if and else in the statement and the first if that switchClass worked will goes off too at the end of the for loop. Any idea what I'm doing wrong?

Thank you for your help in advance!

    $("#abc").on("click", ".order-dim", function(){
        var curr = curr.split(",");
        var hits = [];
        for (var p = 0; p < (curr.length) - 1; p++) {

            hits = (curr[p]);

            var left = " x";
            var whole = " y";
            var right = " z";

            if ( hits.indexOf(left) > -1 ) {
                hits = hits.replace(/ /g, "-");
            alert("X: " + hits);
                $( "#" + hits ).toggleClass( "x-button-on" );
            }
            else if ( hits.indexOf(right) > -1 ) {
                hits = hits.replace(/ /g, "-");
            alert("Y: " + hits);
                $( "#" + hits ).toggleClass( "y-button-on" );
                }
            else {
                hits = hits.replace(/ /g, "-");
                hits = hits.replace(hits, hits + "-z");
            alert("Z: " + hits);
                $( "#" + hits ).toggleClass( "button-on" );
            }
        }
    }